- February 23, 2011
- Categories: APIs, Google Fonts API, HTML4/CSS2, UI / Front-End
Ah! fonts and the internet. A quandary that's plagued many a designer; the internet's lack of typographic expression. Or... so it would seem.
Prior to HTML5 if we wanted to achieve any kind of typographic freedom on the internet we had to resort to some pretty intricate artistry to make it happen. Technologies such as sIFR and, in the case of PHP, the GD Library and an ability to render imagery on the fly.
Then came along HTML5 and the renewed @font-face attribute for CSS. A lantern, a beacon for all the enthusiastic designers out there eager to splash fonts galore into their artwork, but... there's still a small hurdle to overcome. HTML5 isn't officially released and some browsers (yes you Internet Explorer) have limited support.
As quickly as the HTML5 cheer crescendoed it simmered down into cacophonous boo-ing!
That was until this little gem cropped up. The Google Font API initiative.
Having some foresight Google have recognized that, even with the eventual release of HTML5, this new typographic wizardy is going to rely on fonts being available to the browser. No one is really sure how HTML5 is going to play out in terms of font-licensing so Google have decided to setup the Google Font Directory. A repository where budding font-designers can showcase their work and potentially make some money from donations.
Logically Google have taken it a step further and introduced a nifty little API. By simply including something along the lines of
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
in your code you can request any font in the directory to be downloaded into cache.
As most CSS folks will tell you. Once a font is available locally on the machine you are completely at liberty to do things like
CSS selector {
font-family: 'Font Name', serif;
}
In your stylesheet. Ta Da! Let the typographers rejoice! Naturally you can arrange your font-stack to gracefully degrade; and eventually fall back to one of the systems default fonts: serif, sans-serif, cursive, fantasy or monospace.
It's supported in all current browsers; noteably. IE 6+, FF3.5+, Chrome and Safari (Which means it also works on 'droid and iOS).
Technical Considerations. Not to many; except the possibility of increasing page-load as your users try to download a dozen typefaces:
If a page uses web fonts, then the font files have to be downloaded to the site visitor's computer before they can be displayed initially. The font files are served compressed for a faster download. After that initial download, they will be cached in the browser. As the Google Font API becomes widely used, your visitors will be likely to already have the font you're using in their browser cache when they visit your page.
In general, however, you should keep an eye on the size of the font files you are serving. Also be aware that using web fonts may result in the browser making more HTTP requests than would otherwise be necessary.
Compared to using images to display a lot of text on a page, web fonts are likely to enhance the performance (and maintainability, and accessibility) of your page. In other situations, however, they might add to the overall weight of your page.
Further Reading
- Google Font API - Getting Started Guide