Skip navigation

Blog > How to use Google Fonts

Google is currently working on a font directory API (Application Programming Interface) that allows anyone to use high-quality web fonts on their website. Adding these fonts to your web pages is very simple.

Firstly browse Google's font directory and find the font you wish to use. Once you have chosen your preferred font click it and the click the "Get the Code" tab. This will give you a line of code you need to include in you page header:

<code>&lt;link href='http://fonts.googleapis.com/css?family=Cardo&subset=latin' rel='stylesheet' type='text/css'></code>

Once you have this in your page header (above your styles or link to your style sheet) you can now use this font in your styles, just as you would a web safe font:

<code>h1 {font-family: 'Cardo';}</code>

Google Fonts is still currently, as of writing this blog, in Beta and is changing/improving all the time. Currently this technique is only supported by Google Chrome 4+, Firefox 3.5+, Safari 3+, Opera 10.5+ and Internet Explorer 6+. If one of your visitors is using an unsupported browser then the text is displayed using the next available font in your CSS font stack:

<code>h1 {font-family: 'Cardo', arial, serif;}</code>

Google fonts are a great alternative to using images to display headings and other texts. Sometimes a font is a major component of a design and having to fall back to a web safe font can ruin your hard work. By using Google fonts you can get around this problem in a simpler, cleaner and more efficient way.

If you would like to find out more about Google fonts visit - https://developers.google.com/fonts/