HTML and CSS Reference
fonts. Google offers more than 500 fonts free of charge, but most other font hosting services charge an annual
subscription or scaled fees depending on the number of visitors to your sites. The hosting service should provide
detailed instructions of how to use the fonts. Normally, all you need to do is to include a link to the CDN in
your web pages and add the font name at the beginning of the relevant font stack(s) in your style sheet. Other
A wide choice of fonts from a single source.
No need to worry about licensing issues; the hosting service handles them for you.
Reduced bandwidth consumed by your web server.
A potential drawback is that the CDN might be down or network latency might result in a delay in the fonts
Storing Fonts on Your Own Server
The alternative is to store the font files on your own web server. This increases the amount of bandwidth
consumed when someone accesses your web pages, but it gives you greater control. There's no danger of the
fonts not being rendered if the CDN is down or if you forget to renew your font hosting subscription.
If you choose to store the fonts on your own server, you need to handle all the technical and licensing
details yourself. It's not particularly difficult, but there are some oddities to which you need to be alert. The main
problems are the need to supply multiple formats for cross-browser compatibility, and the way that embedded
fonts handle bold and italic.
The rest of this chapter is devoted to these issues.
Choosing the Right Font Formats
Fonts come in a variety of formats. Table 5-1 lists the main formats and the browsers that support them.
Table 5-1. Font Formats and Browser Support
Embedded Open Type (EOT)
TrueType (TTF) & OpenType (OTF)
.ttf , .otf
IE 9 +, Firefox 3.5+, Chrome 4+,
Opera 10+, iOS4.2+
Web Open Font Format (WOFF)
IE 9+, Firefox 3.6+, Chrome 5+,
Safari 5.1+, Opera 11+
Scalable Vector Graphics (SVG)
Chrome 17+, Safari 5+, Opera 11.6+,
iOS 3.2+, Android 3+
It's expected that WOFF will become the dominant format. It has the backing of many font foundries, and
was adopted as a candidate recommendation by the W3C in August 2011. However, for cross-browser support,
you'll also need EOT and TTF, and possibly SVG. Internet Explorer supports TTF and OTF only if the font's
embedding permissions are set to installable.