Google Font API and Font Directory
Back in May, Google introduced their Font API and Font Directory. The API currently serves over 17 million requests a day to users across the globe. Roughly 400,000 unique websites use the Google Font API. Last week Google added more fonts to the directory bringing the font count up to 34 not including variants and character ranges. The fonts in the directory are all released under open source licenses so you can use them on any non-commercial or commercial project. Applying one of these fonts to your website is easy – just add a stylesheet link to your web page, then use the font in a CSS font-family property. When Google receives a request for a web font, they detect the browser and device and serve the font file format that works best. This ensures the most consistent results across browsers and devices.
Using the Google Font API is about as easy as it gets. The instructions provided with the Font Directory couldn’t get any simpler. There are only two steps: linking to the Google stylesheet and adding the font-family name to your CSS. For example, let’s say you wish to use the font UnifrakturMaguntia on your website. If you click on the “Get the code” tab, Google will provide the stylesheet link to use for that font. The link for UnifrakturMaguntia looks like this:
<link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin" rel="stylesheet" type="text/css" />
Simply add this line between the <head> tags in your HTML. If you want to use a web font on your WordPress blog click the “Appearance” link on your Dashboard and then the “Editor” link. From the list of template files on the right, select “Header (header.php)”. Find the <head> tag and place the stylesheet link somewhere after it but before the </head> tag and click the “Update File” button. This stylesheet link is what loads the font from Google. The font files have to be downloaded to the site visitor’s computer before they can be displayed initially. The files are served compressed for faster download time. After that initial download, they will be cached by the browser so they will not need to be downloaded again.
Now all you need to do is call the font with the font-family property in your CSS. To apply the UnifrakturMaguntia font from our example above, use the following CSS:
font-family: 'UnifrakturMaguntia', arial, serif;
The ‘arial’ and ‘serif’ designations tell the browser which fonts to use if ‘UnifrakturMaguntia’ cannot be loaded. The font-family property above will need to be applied to a class or tag in your site stylesheet. Again, if you are using a WordPress blog, select “Stylesheet (style.css)” in the Appearance Editor and find the class or tag you wish to apply the font to. A header tag such as <h1> or <h2> would be a good place to start. Add the font-family property above to the other properties for that tag or class. Click the “Update File” button and you should be good to go. Alternately, you can also simply apply the CSS font-family property in-line like I did with the example below. Since I have not yet loaded the Google stylesheet for this font I will have to include that first.
<link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia&subset=latin" rel="stylesheet" type="text/css" /><span style="font-family: 'UnifrakturMaguntia', arial, serif; font-size:44px; color:#999999">UnifrakturMaguntia</span>
Here is how the above code renders in the web browser:
UnifrakturMaguntia
Since we can now use these custom fonts for special headers instead of an image, we can also apply other CSS text effects to them as well. Let’s apply the text-shadow property:
<span style="font-family: 'UnifrakturMaguntia', arial, serif; font-size:44px; color:#999999; text-shadow:0px -1px 0px #000000">UnifrakturMaguntia</span>
UnifrakturMaguntia
Looks rather nice don’t you think? Unfortunately, the text-shadow property is not supported in Internet Explorer but it is with every other browser.
Google also allows you to download these fonts to your own computer so you can use them in Photoshop or test your designs locally before publishing to the web. You should be aware that some browsers will only display the text after the font file is loaded while others will use the fallback font from the font stack and then refresh the page when the font is available. In my opinion, these drawbacks are negligible. To learn more about the Google Font API be sure to check out their website here.
You may have noticed I’ve been using the Google web font Lobster for the article titles on my blog for quite some time.
Leave a Reply
-
Sorry about the mess. My WordPress template still needs a lot of work. I'll get around to it eventually. Is the clutter in your way? Click here to clear the desk.