November 21, 2021 at 1:14 pm | blabbing, Design, Programming, web.

To increase page speed for blocking font rendering and to reduce the font rendering time when the page loads on your site, add your fonts as a preload at the top of your page.

This may seem counter intuitive to load an asset ahead of time for page speed, but it makes sense in two respects.

  1. When the CSS renders it will get to the fonts and then go fetch them and wait for them to come back and then go on to get other assets that are related to the CSS. This is referred to as a “Blocking call” which means nothing is going to happen until this comes back. Google does not like this and will penalize your page speed for this. Once you preload the fonts you will notice that your fonts are no longer listed as a block call and you can see this in your network tab in the inspector.
  2. If the fonts are not preloaded you might see a noticeable flicker or shift in the page once the font in rendered in the page. Many people will even set an opacity on the body tag and transition it in once the fonts are available to avoid this shift. Preloading avoids this shift because the fonts are immediately available in the document render.
<link rel="preload" href="PATH-TO-YOUR-OTF-FONT.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="PATH-TO-YOUR-WOFF-FONT.woff" as="font" type="font/woff2" crossorigin>

For preloading Google fonts it’s usually recommended that you preconnect as well as preload the CSS

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>