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.
@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 ...
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.