Web typography in 2012 is thriving: a wide variety of font hosting solutions compete for the attention of the web designer, iOS and Android support embedded fonts, and the richness of OpenType is finally being exploited in browsers. The field is advancing so rapidly that the range of choices can feel overwhelming, which is why I usually recommend that new developers use a free font service for their first sites.
Webfont services allow you to break free of the “does the user have this font installed?” guessing game of traditional CSS font stacks, embedding a unique typeface into the page that every visitor can see and interact with. Broadly speaking there are two forms of free service available:
- Sites that host webfonts, and deliver them in response to page requests.
- Conversion services that convert a typeface into a webfont format for the developer to host on their own site.
This article will focus on the first option, with the second following next week.
The primary free font embedding service at the moment is Google, with a typeface library of over 560 fonts. Using the service couldn’t be easier: click on the “Quick Use” icon underneath the font you’re interested in, select the weight and varieties that you want, and copy the linked stylesheet into the head section of your HTML document.
The HTML that Google provides is a rather weird mix of XHTML and HTML5. For example, for the font “Julius Sans One”:
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>I’d recommend cleaning this code up: if you were writing XHTML, make sure that the link tag is internally closed; optionally, you can replace the single quotes with double quotes. In HTML5, the tag would change to:
<link href="http://fonts.googleapis.com/css?family=Julius+Sans+One" rel=stylesheet>You still have to use traditional CSS declarations to apply the chosen font to your own content; I would recommend crafting at least a basic font stack just in case the Google font does not load:
h1, h2 {
font-family: Julius Sans One, Trajan Pro, Trajan, serif;
}Google does not impose bandwidth caps or limits on the number of fonts you can use. However, the fonts it provides are more likely to be created by enthusiastic amateurs than professional typographers (although there are some notable exceptions). As a result, font selection from Google tends to be more appropriate for headings rather than body text.
Typekit
Recently bought by Adobe, Typekit’s font offering have expanded considerably under its new owner. The company continues to offer a free font hosting service, with a few conditions: you can only use two fonts on your site (from a limited section of 200), the site can have a maximum of 25,000 pageviews per month, and pages that use embedded fonts must display a small Typekit badge.
Using the service is relatively easy – an Adobe ID is enough to log in– but substantially different from Google. Rather than using a stylesheet, scripts are employed to embed the TypeKit service into your site. In HTML5, the code supplied by Typekit would be written as:
<script src=//use.typekit.net/ix---zc.js></script>
<script >try{Typekit.load();}catch(e){}</script>Typekit users build a “FontKit” associated with a particular domain: your chosen fonts are written as selectors at the Typekit site via a simple interface. Alternatively, you can write the CSS as classes in the HTML code of your pages. The Typekit service is swift, relatively easy to use, and easily upgradable, making it a good entry point to embedding professional fonts.
Other Services
While there are other font hosting services out there with “free” offers, they all have more onerous conditions: Fontdeck only shows embedded fonts to the first 20 visitors to your site, for example. These services deserve consideration, but require investment… sometimes a considerable one. As such, I would recommend that beginning web developers start with a free service, and move to a pay-for-play model when they have the means or clients to do so.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
