Embedding Custom Fonts with the Google Font API

We have always been quite restricted when choosing a typeface for a website. It’s got to be ‘web safe’ which means that a very high % of users will have that font installed on their computer – so that the site will look the same for just about everyone. To get around this many sites have simply added the font they desire within an image. This has implications – accessibility, page load times and SEO to name a few.

Embedding a custom font has been made easier with the CSS3 property @font-face. However for non-CSS3 browsers such as Interner Explorer it’s a problem (as it currently has around 60% market share too).

Google Font API aims to make embedding custom fonts, cross browser much easier. It doesn’t rely on JavaScript (which page load fanatics will like) and the available fonts are all open source so you can use them in your personal and commercial projects. One slight disadvantage is that there currently isn’t a great deal of fonts to choose from.

Adding the Google Font API to your website is pretty simple. You start by adding a CSS reference within the head section of your page.

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name”>

Replace the font name with the exact name of the font within the Font Directory, remembering to replace spaces with a +.

Now add a reference to the font name within a CSS selector of your choosing (replacing the font name with the font you chose in the 1st line of code above), for example:

h1 {
font-family: ‘Font Name’, serif;
}

This example will give all text with h1 tags on your page the desired font. As the Google Font API works like this you can expand it by adding further CSS text properties such as text shadow for example.

Google often creates an app, website or API to solve a problem or issue which could be improved. Embedding custom fonts cross browser is certainly one of them and this solution works brilliantly. It should keep both designers and developers happy!