O'Reilly logo

Responsive Typography by Jason Pamental

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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('woff'),
    url('/fonts/OpenSans-Regular-webfont.ttf') ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required