Google has released a new toy for the web developers among us to play with. They now have a new font API which can be integrated into any web page. The best part is that it's one line of code to add and you're all set. Just add this to the head section of your HTML document:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Then, just specify one of their available fonts in your CSS styles wherever you want to use one of them, like so:
<p style="font-family: 'Lobster';">Some text</p>
Easy! One of the big complaints I've heard from both clients and other developers is that we're limited to a small subset of fonts that are available on everyone's computer. Just because a client has some fancy font they want to use doesn't mean everyone will have it available for the page to use. We've had to use the font within Photoshop and then save an image of what the text is supposed to look like. Usually a different font is desired for headings, and you don't want to replace your text headings with images because it will make the site unusable for people with screen readers and impact search engine rankings (unless you're using some fancy CSS image replacement techniques). With the Google font API, as long as the font you want is available through the API, you can use it without regard to whether or not someone has it on their computer.
I took a look at the CSS that Google's font API is generating and it appears that they are just declaring the font and using the src attribute to specify another URL where the font itself lives. The downside to all of this is that it adds several additional HTTP requests to the page load. First, there is the stylesheet call to go get the generated CSS for the fonts, and then another HTTP request to go fetch the font file after the CSS has been loaded. The technique has been around for a while (I once had a font made out of my own handwriting and used it on the web for a short period), but I haven't seen it used out in the wild very often (likely due to the license restrictions on attractive fonts). Now that Google is making some fonts freely available to use, perhaps we'll see some different typefaces out there in the wild more often.
Recent Comments