Optimize Any Fonts in Any Websites

 |  by

One of the main keys of optimizing or speeding up website performance is reducing the total requests and file size in a page. That will include Fonts.

ThinkWeb

Fonts are crucial to our page design. Using different font types can change the whole design character of our web page. Choosing the right font is as important as choosing the right design.

But, it’s also crucial for our page’s speed too.

Fonts can make our site slow. Especially if we’re not using them wisely, based on the page performance mindset.

Web designers often use multiple fonts just to support the character of their designs. This certainly will make our web page slow.

Though sometimes it’s not quite significant from the visitor’s point of view, especially if we only use 1 or 2 fonts, however, fonts are also an important part that we need to optimize. Optimizing fonts can help in improving our Core Web Vitals scores, significantly.

The most common method that people often use is by embedding fonts from the Google Fonts library. Yes, this is the easiest way for using fonts on our website. But it also has its drawbacks.

What is Google Fonts?

Google Fonts is a font library provided by google with a totally free license status. According to wikipedia, as of April 2021, there are a total of 1,052 font families provided by Google in its font library. Including 89 variable font families.

To date, Google Fonts libray has reached 50,813,260,370,7536 total font views, with the most fonts being used are Roboto, Open Sans, and Lato. We can see the details here.

It’s free and ready to use.

The problem is…

Serving fonts from google can actually reduce the speed performance of our website if we’re not using it carefully and handling it properly.

Why?

  1. There are so many unused bytes in their default CSS (Google Fonts CSS)
  2. The amount of time to make the connections and fetch files from 2 different DNS resources (we’ll explain this later) can often make a huge render blocking time

Both may cost us warnings on our Core Web Vitals scores.

How to Optimize Google Fonts?

We can make Google Fonts load fast on our site. The following guide are several ways to optimize and speed Google Fonts in any WordPress site, or any type of website.

  1. Self Host the Google Fonts CSS.
    If we use fonts from Google Fonts, it would be better if we didn’t use the default CSS file provided by google.
    This is the default method to embeds font(s) from the Google Fonts library:
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    What happens when we use that default code? We’re fetching a CSS file of about 800 Bytes which contains this:

    /* cyrillic-ext */
    @font-face {
      font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    /* cyrillic */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    /* greek-ext */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }

    /* greek */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }

    /* vietnamese */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    /* latin-ext */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIXKMnyrYk.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.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;
    }

    /* cyrillic-ext */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic3CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    /* cyrillic */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic-CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    /* greek-ext */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic2CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }

    /* greek */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic5CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }

    /* vietnamese */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic1CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    /* latin-ext */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic0CsTYl4BOQ3o.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face { font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.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;
    }

    /* cyrillic-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    /* cyrillic */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    /* greek-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }

    /* greek */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }

    /* vietnamese */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    /* latin-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
    }

    /* cyrillic-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    /* cyrillic */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }

    /* greek-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
    }

    /* greek */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0370-03FF;
    }

    /* vietnamese */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
    }

    /* latin-ext */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face { font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.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;
    }


    While all we need usually is just the Latin text only.
    If we call those Google Fonts by manually inputing the CSS into our own CSS file, we would only need this:
    /* latin */

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.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;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzIXKMny.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;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: italic;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.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;
    }

    It’s much less, right?

  2. Limit the Font Families
    The font’s file size isn’t small, even if we use the woff2 extension. These are the woff2 file size of the 3 most frequently used fonts above.

    Roboto

    11,0KB

    (400/Regular)

    11,0KB

    (700/Bold)

    Open Sans

    9,13KB

    (400/Regular)

    9,08KB

    (700/Bold)

    Lato

    14,0KB

    (400/Regular)

    14,2KB

    (700/Bold)


    So, even if we ‘only’ use 2 font combinations, the browser must download additional files of at least 20KB (gzipped) with an additional 4 font requests. And it will be more if we use more fonts.
    Remember, all file requests are render-blocking. So we really should try to minimize the number of requests as much as possible.
    Best Practice: Don’t use more than 2 fonts.
  3. Limit the Font Variations
    In most cases, we don’t actually need to embed the font files for bold and italic style. Especially if we use the Sans-Serif Fonts families. The browser will still tilt and adjust the thickness if there’s a <strong> and <em> tag as well as the font-weight: 700, font-weight: bold, and font-style, in the text CSS.
    The results are often quite the same. Or at least, can be tolerated.

    Example of Roboto Bold Font display by calling its regular font style (normal) and regular font weight (400) only

    Example of Roboto Bold and Italic Font display by calling its regular font style (normal) and regular font weight (400) only


  4. Filter the Characters
    Do you know how many characters are stored in single font file?
    roboto-font-characters

    A lot.
    The image above shows the types of characters in a regular Roboto font file. We don’t actually need all of them, right?
    We can filter the characters that we need from Google Fonts in the following way.
    Copy and paste this into the browser:
    https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz@!-_+/\|/?%20&subset=latin&display=swap

    It will show CSS as follows:
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbeHTuKd-SkmHNWwpVAzhZaZNbArX7UmZ3hVslCN7nTQnvJWTEaW8FHhiapfbtvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4BM&skey=a0a0114a1dcab3ac&v=v27) format('woff2');
    }
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA0qhvVlSEMGssVwHubd41EQnS6kya0xphlyZ8mDc6o4iQFKK5F3VtZ5PdjctC82LlaBb0yRZ5iW51bwqE7-6exqgvXI1IEVqk&skey=c06e7213f788649e&v=v27) format('woff2');
    }

    The outcome difference between the font file size from google’s default CSS and the CSS that we have filtered:

    Roboto

    (default)

    11,0KB

    (400/Regular)

    11,0KB

    (700/Bold)

    Roboto

    (filtered)

    5,76KB

    (400/Regular)

    5,72KB

    (700/Bold)


    The file sizes are reduced by more than half, right? We can save a lot by doing this method.
    Alternatively, we can download the font, and delete the characters that we don’t need by using a font editor software like FontForge, and serve it directly from our hosting.
    Important note: Using font fallbacks (using system fonts or web safe fonts that look similar with the font we use) is wise when we use this method.
  5. Inline the Google Fonts CSS in the <head> Section
    As fonts are a part of the critical assets, it is best to inline the CSS in the <head> section to eliminate the need to fetch the style from the CSS file.
    Here’s an example for Roboto:
    <style>

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
    }

    </style>

  6. Preload & Preconnect the Google Fonts
    Now that we have inlined the CSS in the <head> section, it’s proper to preload the file and preconnect the connection in order to make the browser to load them right away. Right after the browser finish rendering the HTML.
    Preconnect is useful for asking the browser to connect with Google Fonts Api since the beginning of the browser’s rendering process.
    <link rel="preconnect" href="https://fonts.gstatic.com">

    Preload is useful for asking the browser to fetch the font file(s) right after the browser finish rendering the HTML.
    /* Roboto Regular 400 */
    <link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2" as="font" crossorigin>

    /* Roboto Bold 700 */
    <link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2" as="font" crossorigin>

    Both can helps us avoid FOIT (Flash of Invisible Text), FOUT (Flash of Unstyled Text), and additional CLS (Cumulative Layout Shift)
  7. Self Host Google Fonts Files
    Why do we need to self-host the Google Font files while Google has amazingly fast CDN infrastructure? The answer can be found in these 2 images:
    serving fonts via Google CDN
    Serve font from Google CDN (source: WP Speed Matters)

    serving fonts via self-host
    Serve font from our host (source: WP Speed Matters)

    As we can see in the first image, there are 2 source of domains when we use the Google Fonts CDN. One for the CSS file (https://fonts.googleapis.com/), and one for the font files itself (https://fonts.gstatic.com). So it’s 2 DNS lookups already, just for embedding fonts. It really is not a good practice.
    In most cases, the best way to use fonts from the Google Fonts library is by embedding them locally from our host. By self-hosting the fonts, we can save the DNS lookups number for something else.
    Note: Using too many DNS lookups can be backfire, as it can slow down the initial browser rendering process. So, keep the numbers low.
    How to Self-Host fonts from Google Fonts library?
    1. Download the font file(s) directly using the font source url in the Google Fonts CSS, or use the Google-WebFonts-Helper created by Mario Rantfl.
    2. Upload the file to our host using FTP or cPanel’s File Manager.
    3. Call the file via CSS.
      @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(/font-url-path/font-file-name.woff2) format('woff2');
      }

How to Optimize Self-host Fonts?

Basically, the steps are similar with the above steps.

  1. Limit the Font Families
  2. Limit the Font Variations
  3. Limit the Text Characters using Font Editor Software
  4. Inline the CSS in the <head> Sections
  5. Preload the Font File(s)

Conclusions

  • Though using multiple font families with its multiple variations can make our site pretty, they can hurt our page performance.
  • If we want to achieve good scores in our Core Web Vitals, using less fonts will give us more performance benefits.
  • Limit the Font Families and Variations. Filter or remove the unused characters.
  • Like any other Critical Assets, inline the font’s CSS in the <head> sections, and preload the font file(s). This will help in improving our Core Web VItals Scores.
    (Self-host or not, if the fonts are part of the critical assets that are used in the above the fold area, we should preload the files.)

Bonus Tips

  1. Convert the Font File to Base64
    We can eliminate the need to fetch the font files by converting them into Base64 encoded string.
    Upload the files to Base64 online converters like Gift Of Speed, and use the base64 encoded string as the font’s url source.
    Here’s an example of the code snippet for Roboto font:
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(data:font/woff2;base64,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);
    }

    *Replace the base64 code to your font’s base64 code.
    Important note: A base64 encoded font string size are larger than the font file size itself. So make sure to have it filtered first.
  2. Use System Fonts or Web Safe Fonts Instead
    In many cases, we don’t actually need to use a special font if our website design doesn’t need one. Using System Fonts and Web Safe Fonts can greatly reduced our request and total page size.
    System Fonts are fonts that are pre-installed in the device Operating System. Most WordPress Themes nowadays use this as the default font option.
    Web safe fonts are fonts that are universally installed across all browsers. Check out the list of Web Safe Fonts that are safe to use here.
    Both will give us zero request for our text fonts.
  3. Use Variable Fonts
    If we really need to use all of the fonts variations (font-weights, italic styles), using Variable Fonts can help us reduce the total file size of the fonts.
    Read more about Variable Fonts in this article.
    In a single font file, Variable Fonts can transform into multiple weights (start from 100 to 1000). It pack the styles in a single file.
    Here’s a demo of what Variable Fonts can achieve made by Frida Nyvall:

    We can choose multiple font weights by only fetching 1 single font file.
    Pretty cool, right?
    We can have a net gain in font size by using Variable Fonts if we really need to use multiple font weights.
    But it’s new. Check this first, and choose wisely.

Photo of author

By

Arya Dhiratara

Co-Founder.

Leave a Comment