Recently the question came up of whether or not it is better to self host web fonts or load them from an offsite provider like Google Fonts or TypeKit. It’s common now to also load icons as a font, which can be accomplished through a service like Icomoon or Font Awesome. This is advantageous because it allows the SVG icons to be styles using font controls like size and color. First lets define what exactly we mean by self hosting fonts vs loading offsite.

Loading offsite sample:

<link href="https://fonts.googleapis.com/css?family=your+font+name" rel="stylesheet">

Self hosting sample:

<link href="/library/fonts/my-font.ttf" rel="stylesheet">

Where the font has been downloaded from the foundry and lives in your site files with the rest of your sites resources.

So what are the advantages and disadvantages of loading fonts offsite?

Advantages:

• It doesn’t cost you/your site any bandwidth, which can add up over millions of pageviews. This generally would only apply if you pay for bandwidth by usage, probably through a host like AWS. If you pay for bandwidth on a tier and you don’t exceed your monthly limits this would not be a factor.
• It may not cost the user any bandwidth, if their browser has already cached the font you are referencing. This could potentially speed up the page load. More likely if you are using a common font.
• Licencing: Google Fonts are all Open Fonts but TypeKit and many other font foundries may restrict self hosting in the license agreement.

Disadvantages:

• Potentially slows down page load for the following reasons

  • It’s a request to a CSS file on another domain. Browsers treat this as a low priority.
  • Once it parses the CSS, it can then determine the urls for the fonts. In a high latency scenario, this is bad.
  • The CSS uses unicode range feature to determine what fonts to actually load. Not all browsers support this properly (IE), they end up downloading all the fonts offered, including non-Latin versions even if your site doesn’t use them. This typically makes the font payload 3x bigger than it needs to be.
  • Some browsers have special support for priority loading of fonts (to prevent fouc and/or repaints) but you cant take advantage of them using the provided CSS.
  • The CDN for the font host could potentially be slow (probably not the case for Google Fonts)

• Security and Privacy. You are loading a script from an outside source, which if untrustworthy, could potentially compromise security. The host can also collect data from your users which is a potential privacy issue.

Additional things to consider would be that using a service like Icomoon for icons you can create your own subset of icons (a custom font that only has the icons you need) and then serve that font locally or hosted through the foundry. This saves the user from having to download a whole set of 1000 icons when they only need a few.

So which method is better? The answer is that it depends on how much traffic you get, what fonts you use, what your license allows and your stance on privacy.