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'; 1
  src: url('/fonts/OpenSans-Regular-webfont.eot'); 2
  src: url('/fonts/OpenSans-Regular-webfont.eot') format('embedded-opentype'),
    url('/fonts/OpenSans-Regular-webfont.woff') format ...

Get Responsive Typography now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.