A Developers Guide to Adding Web Fonts

Overview

There are a few key concepts to learn when using webfonts. This includes fonts on services like Google or custom fonts that you've purchased.

1. Where is the font stored?
2. How to include the font?
3. Which font formats to use?

Where to store the Font?

The first big decision is whether to store/serve fonts from your local project, or use a 3rd party service like Google Fonts, The Font Library or TypeKit.

Storing locally means not relying on a 3rd party service and potentially giving them analytics data from your users (privacy considerations). However, serving fonts locally will take a couple extra steps for setup and you'll be responsible for the extra bandwidth

If you purchased a font directly from a Type Foundry, you're only option may be to store/serve them locally.

How to include the font?

There are multiple ways to include your fonts. I believe this is a personal style choice, but may also be dictated by your framework or tooling.

CSS has a feature called at-rules and we'll demonstrate two uses for them here. The @import and @font-face rules.

Option 1: Declare your own @font-face

The @font-face at-rule is the method to define all the attributes about your Font. This is where you'll define where to download the font from, the font format, weight, and other attributes. You would put this declaration at the beginning of your CSS. Here is an example of a declaration:

  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'),
      url(https://myfontlocation.com/roboto.woff2)
      format('woff2');
  }
  @font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto Italic'), local('Roboto-Italic'),
      url(https://myfontlocation.com/roboto-italics.woff2)
      format('woff2');
  }
  

If you are hosting your fonts locally, then you'll need to define your own @font-face. In the next two options, you'll let the Font service take care of the @font-face declaration for you and simply import their CSS.

Option 2 Use a Link tag to reference your font css.

If you use a service like Google Fonts, they conveniently provide this tag for you and you simply need to include it. Alternatively, you can use the link tag to point to your local CSS file that includes the @font-face rule.

  <link
    href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
    rel="stylesheet">
  

Click the following examples to see the underlying CSS that Google generates for you.

• Roboto Font, 400 and 700 Weight, Regular and Italics
• Inters Font, 300 400, and 500 Weight, Regular only

Option 3: Use an @import statement to reference your font CSS.

Similar to the Link option, this is just another way to reference the CSS file (either locally, or the one provided by Google).

  @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  

Referencing font in your styles

As long as you used any of the previous methods to include your font, you can now reference your font as normal. The font-family name here, should match the name from the @font-face declaration.

  body {
    font-family: Lobster;
  }
  h2 {
    font-family: Inter;
  }
  

Which Font formats to use?

Font format support varies by browser. You can check the https://caniuse.com/ website for the latest browser support by type. Woff and OTF/TTF are the most compatible based on the "Can I Use" website.

• Woff (Web Open Font Format)
• Woff2 (Web Open Font Format 2.0)
• TTF (TrueType Font)
• OTF (OpenType Font)
• EOT(Embedded Open Type)
• SVG Fonts

If you use Google Fonts, this will automatically serve the right font format based on the browser capabilities. This is one of the major advantages along with fast serving via CDN and a high potential for a cache hit if the user has ever visited a website with the same font.

Additional performance considerations

If performance is a factor, I recommend testing your fonts with disable cache turned on in your dev tools. Further, it's worth reading up on a few options for font loading.

• Prefetching fonts
• Preloading fonts
• The @font-family display attribute

These techniques may help reduce issues with FOIT (flash of invisible text) and FOUT (flash of unstyled content).