Back a few years ago it was almost impossible to use any other font than a standard system font on a website, without serious usability implications. Today, it is all about comparing the best solution for the project. In this tutorial, I’d like to show you how to use a non-standard font on your website by selecting from the great Google Web Fonts library which has got many high-quality fonts to choose from that in most cases have fair licenses.
Choosing a Font
Google has really grown their web fonts library and at the time of writing, it contains 214 fonts to choose from. Just head over there and start browsing to find a font that you would like. You can search by type (serif, sans-serif etc.) and then narrow down from there. Don’t forget that most fonts are available for download so that you can use them in your design mockups in say Photoshop. Once you have selected the font you like, you have the option to add it to your collection so that you can easily find it and download it to your computer, should you wish.
Embedding the Font
To start with the embedding process, click on the “Quick Use” icon in the font listing to be taken to a page with all necessary code. Google makes it very easy for you and walks you through this process. First you need to select the variations you’d like. Remember that each variation you add and call will add to the page load time. This means that you shouldn’t go crazy and add all variations “just in case” if you don’t think you will need them. Should you need them later, you can always go back in and add the font. Google will actually tell you the load time implication for the specific font selection on a scale from 1 to 100 (where 100 is really bad).
Scroll down a bit and copy the link code which should be something like this, depending on the font that you have chosen. Place this between the <head></head> tags in your header.
<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>
Finally, in your CSS, just use the font name like you would call any other font. Make sure to do a nice degradation series, should the custom font not load fine for you. You’d want to specify a font that looks close to the one you have selected.
font-family: 'Ovo', Georgia, Times serif;
With this, you are all set to have some text (preferably header text) presented in a more custom font that the standard set of web fonts.