Anyone who’ve designed a website would agree that one of the most frustrating aspects of designing a website is fonts – the font you choose needs to be already installed on your visitors’ computer or device, and yet the selection of the web-safe fonts is quite limited: Arial, Georgia, Verdana, etc. If you want a fancy font for your title, you’d need to convert it into an image using Photoshop or applications.
Then, in May, Google launched the Font API and Font Directory. To get an idea of what you can expect from the Google Font API, check out the Google Font Preview.
The Google Font API lets you use the web fonts that are in the Google Font Directory, currently over 25 fonts. With the Google Font API, you can now add high quality open source fonts (fonts that work all major browsers) to your website. Best of all, it’s easy to use and it’s free!
Exciting, right? Definitely!
Let’s try implementing it onto a website.
There are two steps for using Google Font API.
1. Reference the CSS stylesheet you need within your HTML file, with the tag inside the tag. This reference should be in all web pages that will use the font(s).
It’ll look like this:
<head>
<title>Home Page</title>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName”>
</head>
Replace the “FontName” with the font you wish to use from the Google Font Directory.
If you are using WordPress, you can simply add the code to your header.php file, inside the head tags.
2. Use CSS to specify how you want to use the font. For example, you want to use the font on all h1 header tags, you would use the following CSS:
h1 {font-family: ‘FontName’;font-size: 18px;}
Styles
By default, you will get the normal style of the font. If you want display another style, such as bold, you add colon (:) at the end of the font’s name followed by the style you want. If you need more than one style, simply separate them with a comma (,) like this:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName:bold,italic>
To see the Font API in action, check out Smashing Magazine’s website. They have relaunched their site using the open source Droid font hosted by Google.
Multiple Fonts
If you want to use more than one font, you don’t need to make multiple references. Instead, add the additional fonts in the same reference, separating with a | symbol, like this:
<link rel=”stylesheet” type=”text/css” href=http://fonts.googleapis.com/css?family=FontName:bold|AnotherFontName” >
SEO Implications
Google Font Directory is more SEO-friendly because it replaces the fancy title images you have been using – not only does it load faster, the text styled is also searchable.
Another advantage of using Google Font API – the font file is served by Google, not you, guaranteeing uptime and speed. If a user has already visited another website that uses Google Font API, they might already have the font you need in their browser’s cache, further speeding up the page response time.
For more information on using the Google Font API, including the offical Get Started guide from Google, visit Google’s website.