I recently discovered Google Fonts API that allows web developers to embed fonts into their web pages which gives them the freedom to style the page as they want without resulting to rasterized text. It sets us free from the overused default web browser fonts such as Arial, Verdana and Courier fonts. This is quite useful for SEO since your stylized text doesn't need to be a .JPG or .PNG image anymore, but a pure text that can be searchable and indexable by common web crawlers. The API provides a simple way to include a dynamic stylesheet that includes the necessary declarations on embedding Google's wide variety of fonts. The fonts available are listed on the Google Font Directory. Take note that the fonts in the directory are all open-source licensed, so we have an almost complete freedom in using them, whether for personal or for commercial purposes. But I have to add that not all browsers support embedding of fonts. Old ones and browsers from low-power devices such as old mobile phones won't benefit from this service. According to Google, these browsers are known to support Google Fonts:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Opera: version 10.5+
- Microsoft Internet Explorer: version 6+
Using the API is fairly simple. For example, if you want to embed the font UnifrakturMaguntia, you simply add the following code to your HTML code, preferrably inside the <head> tag:
[html light=”true”]
<link href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia" rel="stylesheet" type="text/css" />
[/html]
Take note of the href value of the href attribute, it always takes the form of
[code light=”true”]http://fonts.googleapis.com/css?family=FontName[/code]
where FontName is the name of the font found on the Google Font Directory.
If we were to examine the content of the code, it just adds a new CSS stylesheet to our HTML page that is hosted at Google's servers. But we can also notice that it can take several parameters that are dynamically generated as we provide different sets of parameters to it. For instance, if we copy/paste the value of the href attribute of our link in the example above (http://fonts.googleapis.com/css?family=UnifrakturMaguntia), the API will return a CSS stylesheet that looks like this:
[css]
@media screen {
@font-face {
font-family: ‘UnifrakturMaguntia’;
font-style: normal;
font-weight: normal;
src: local(‘UnifrakturMaguntia’), url(‘http://themes.googleusercontent.com/font?kit=7KWy3ymCVR_xfAvvcIXm36ofnEspxrPLQXtAOAVG_vM’) format(‘truetype’);
}
}
[/css]
After inserting the <link> element into the <head> of our HTML, we can now add styles to our document using the font-family CSS style and the font named UnifrakturMaguntia is now available and accessible to our HTML page.
[css light=”true”]p { font-family: ‘UnifrakturMaguntia’, arial, serif; }[/css]
If you can see the code above, we also added the font arial and serif into the styles. The reason is to support non-modern browsers. So if your page is opened by user using a browser that doesn't support embedding of fonts, it will use the next font available, Arial. But if it still doesn't support the Arial font, such as old mobile phone browsers, it will use it's built-in serif font to display the content. If you are using a modern browser, then you should be able to see it in action with the example below:
This text is supposedly using the UnifrakturMaguntia font.
You may try to select the text above, then copy it. The text should paste into any other text editors.
To learn more about using the API such as requesting multiple fonts and styles, you can see Google's Getting Started guide.