Be a pro: use font embedding, not font linking

If you want to use a font on your website you can load it by linking to an external server (using CSS or JavaScript). This is common practice and you will probably know about it if you worked with Google Fonts or Adobe Typekit. This is what we call “font linking”. The alternative is that you host the font yourself and use @font-face in your CSS to load it. You will need to upload the font in several formats to your server. This self-hosted approach is also called “font embedding”.

What is the difference?

With font linking you add the following HTML code to your website:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

While with font embedding you add the following CSS code:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('open-sans-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('open-sans-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('open-sans-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('open-sans-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('open-sans-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('open-sans-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

As you can see it easier to link the font as you do not have to write extensive CSS and upload the 5 font files (eot, woff2, woff, ttf & svg) that font embedding requires.

Font linking is not allowed

Font linking does not work for offline content. It requires requests to other services, in contradiction to font embedding. Font linking may cause uptime worries, dependency issues (Great firewall of China) and leaking of Personally Identifiable Information (PII). In some countries (like the Netherlands) it is even forbidden by law to share PII (like IP address and user-agent string) without an explicit consent from the user to allow tracking. So, it is a simple choice, one would think, right?

Font embedding is also not allowed

Services like Fonts.com, MyFonts, Typekit, etc. do not allow font embedding, you need to link them. The reason: they have a “pay-per-use” business model. But isn’t it a bit strange that this type of usage (enforced by the licensing model) is actually restricted by EU privacy laws? Exception is Google Fonts as their fonts are free to use and free to embed.

It’s-a me, Mario! Let’s-a go!

Mario Ranftl (majodev) has created an extremely useful google-webfonts-helper (hosted on Heroku). If you want to know how you can find the source on Github (collecting stars). It makes it very easy to self-host your fonts. The steps:

  1. Go to: https://google-webfonts-helper.herokuapp.com/fonts
  2. Select one of the 682 fonts from the menu on the left
  3. Copy-paste presented CSS code into your stylesheet in the directory “css”
  4. Download the zip file using the big blue button
  5. Unzip the files and upload them to your website in the directory “fonts”

Thank you Mario, that is super! Alternatively, if you have your own fonts and need them in such a convenient zip file, you may try fontsquirrel.com’s Webfont Generator. Let me know how you like these tools (or if you know any better) using the comments. Also, check out the discussion on Hacker News!

Now let’s start using fonts responsibly!

Share

Leave a Reply

Your email address will not be published. Required fields are marked *