Wednesday, July 20, 2011

Google Web Fonts

It has been a long time since I've really done any true design work. I recently started doing some on a project, and I came across Google Fonts. I have to say that I'm blown away with the possibilities. Google Web Fonts is a web font service, that allows you to embed a font with your page. Amazing! A few years ago, we were stuck with just your standard Arial, Times New Roman and Verdana font faces. Now we can hit an API, download the font to the client's machine, and use that font instantly in any modern browser.

So here's how Google Web Fonts works. Navigate to their site, and search around for your font. There may not be a ton to choose from, but still many options. Click on "Quick Use" for that font. Select the options you want (such as font weight). Scroll down, and you'll see the link to the style sheet that you'll need to put in your page. It'll look something like this:

<link href="http://fonts.googleapis.com/css?family=%3Cspan%3EMerriweather:900&v2%3C/span%3E" rel="stylesheet" type="text/css">

Then, like use the font-family rule for any tag, and you'll be set:

h3 {font-family: 'Merriweather', serif;}

You can download the font and install it on your machine as well, which is nice as well. The service is free, and most fonts work across all browsers. The service is fast and incredibly easy to use.

I've come across a handful that don't work in in IE. I wasn't alone in my findings. Other people have suggested other font services as well, so Google isn't alone. But it shows me how far we've come in a few years ago. I'm surprised it isn't used more. I'm no expert on fonts, but these are really neat services.

No comments:

Post a Comment