Why you need to add your custom fonts locally

Sun, 18 Jul 2021 20:34:10 -0400

Today, many developers utilize numerous fonts from all over the web to deliver a unique user interface for their clients. For example, developers use Google Fonts, a free, open-source library of fonts available for personal and commercial use. However, custom fonts and large icon libraries provide a potential performance degradation and slower first-paint time.

The issue

Here are some common ways developers insert fonts into their website:

<head>
  ...
  <!--Linking to a render-blocking resource into the webpage-->
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet">
</head>

body {
     /* and using in CSS */
     font-family: 'Josefin Sans', sans-serif;
}

In this example, the webpage must create an additional cross-origin network request to obtain the CSS file from Google’s font service. This network request adds multiple seconds to the render time for users with a poor connection.

Fonts on mike's blog

Why you need to add your custom fonts locally

The issue