Responsive Typography

Chapter 5. Performance: Get Fonts on Your Site, Fast

After all you’ve read so far about the various methods at your disposal to add web fonts to your site, it’s time to make a choice. Your next steps will be determined by which option you choose: self-host or service. I’ll show examples for both options, most of which work in a very similar way, though with some important differences.

Self-Hosting

If you have a license that permits hosting yourself, or if it’s a font of your own creation, you may end up deciding to follow this route. It may also make sense based on your users and network: if you have very high volumes of traffic and/or your own optimized CDN, you might save considerable cost with self-hosting. The initial setup is relatively straightforward, but there are a few gotchas related to the syntax used in setting up the @font-face declaration, so it will save you some headaches to keep a few things in mind. Have a look at the code in Example 5-1 and then we’ll examine the parts and special considerations.

Example 5-1. Example @font-face declaration

@font-face {
  font-family: 'OpenSans'; 
  src: url('/fonts/OpenSans-Regular-webfont.eot'); 
  src: url('/fonts/OpenSans-Regular-webfont.eot') format('embedded-opentype'),
    url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
    url('/fonts/OpenSans-Regular-webfont.ttf') ...