Fetch (Google) Fonts Fast

Excerpt

Fetch Fonts Fast by avoiding a roundtrip.

How it works

When you use Google Fonts you will have noticed that examples that show how the font is loaded is done through a css file loaded from <fonts.googleapis.com>.

<link href='https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap' rel='stylesheet'>

This seems to to be the optimal way and here we see how to reduce th number of network roundtrips when loading web fonts.

Is this a font download?

No actually this link is actually downloading a css definition with a standard @font-face definition:

@font-face {
    font-family: 'Architects Daughter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/architectsdaughter/v11/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2)
      format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
      U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

Here you see the real font definition and where the font files can are available.

Download in one step

As the first download has a different domain name in the url than the font files also another DNS name resolver step is required. This is also slowing down the page speed.

To avoid the 2 step download the first download can be persisted in the page inline or in the CSS file.

As a second step the font data itself is then downloaded from <fonts.gstatic.com>

This gives you the opportunity to download the font file once and place it on your web server instead of using the sources from the google hosted Content Delivery Network (CDN) if you need full control over the files loaded into your web application or when you need to support offline scenarios.

Tags

CSS