Web Fonts

Using web fonts can be tricky and as there are so many considerations

• Use a Variable Font?
• How to reduce the size?
• How to avoid a layout shift as the font is loaded?
• ...

Here is a quick summary of what you should do as of 2022.

1. Use a variable font

   This means only ONE font file needs to be download for all the different weights and widths. This file is usually bigger than one weight of a font but smaller than multiple weights font files.

   Not many fonts are "easily" accessible as a variable font. Often you need to manually convert a variable font ttf file to a web woff2 file.

   If you just need any font then feel free to download the the optimized Rubik we are using on this page.

   @font-face {
     font-family: 'Rubik';
     src: url('/fonts/Rubik-VariableFont_wght.woff2') format('woff2 supports variations'), url('/fonts/Rubik-VariableFont_wght.woff2')
         format('woff2-variations');
     font-weight: 1 999;
   }
   

2. Preload the web font

   This means the font will start downloading before any CSS has even been parsed.

   <link
     rel="preload"
     href="/fonts/Rubik-VariableFont_wght.woff2"
     as="font"
     type="font/woff2"
     crossorigin
   />
   

3. Use optional fonts

   In combination with 2. this means there will be NO layout shift at all. Nothing will be displayed until the font is loaded or a timeout (usually 100ms) is reached. If there is a timeout then for this page visit a fallback font will be used. On the next page load the font will be cached and directly rendered with the web font.

   @font-face {
     font-display: optional;
   }
   

Put it all together

All together this means you can use local web fonts and there will be no layout shift.

<link
  rel="preload"
  href="/fonts/Rubik-VariableFont_wght.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

<style>
  @font-face {
    font-family: 'Rubik';
    src: url('/fonts/Rubik-VariableFont_wght.woff2') format('woff2 supports variations'), url('/fonts/Rubik-VariableFont_wght.woff2')
        format('woff2-variations');
    font-weight: 1 999;
    font-display: optional;
  }
</style>