Fonts Optimization

What is fonts optimization?

Nowadays so many websites use web fonts and all of these fonts are different sources the user needs to acquire when they're visiting your website, which means that it is possible that the web fonts you're using for your website can slow down your machine. To tackle this issue, there's a very simple solution and that's when fonts optimization comes into play. Fonts optimization means that your fonts are optimized by the way they're loaded into the website. This improves the user experiences.

Web Fonts

There are two types of basic web fonts:

1. Web-safe fonts = Standard & pre-installed on different devices
2. Webfonts = Fonts that are not standard & pre-installed, so they must be downloaded by the browser

Hosting Webfonts

When you want to use a webfont instad of a web-safe font, it needs to be downloaded or "stored" somewhere on your device and this is called "hosting". There are two options to "host" web fonts:

1. Self-hosting = Saving the resources of the font on your webserver with your website files
2. Third-party hosting = Using a font-service like Google (will fail when there's an outage of their server)

Issues with Webfonts

Like I said before, webfonts can cause your application to slow down and I'll explain two ways in which that is possible:

**1. FOUT = Flash of unstyled ** **2. FOIT = Flash of insvisible text **

1. FOUT stands for "flash of unstyled text" which basically means that once you load the page, you'll first get to see unstyled text (the fallback font) and then later on when the font has been loaded or hosted on the website or application, you'll see the styled font.

2. FOIT stands for "flash of invisible text" which means that once you load the page, you'll first get to see empty spots on the web page and once the font has been loaded or hoster, it will show the text with the font.

You could be asking yourself "why is this an issue"? Well, if different people have different devices, different connections. If you as a user already has slow connection and the application itself is also slow then that just really sucks for the user and probably move onto a different website or application.

How do you tackle this issue?

Yep, that's right. Font optimization!

Before I want to talk about the solution, let's look at how we normally can import fonts into our projects. We have a few different methods to import fonts into our projects:

1. Import the font files into your project and then using @font-face in your CSS file
2. By using the link tag in your header of your HTML document

The issue with font-face is that it takes time to load the font when it loads the styling in your CSS file, however if you put the font in the link tag that's inside the header of your HTML, it forces to load your font together with your document, which means that you don't have to wait for the text after the page has appeared.

To improve the optimization of your fonts, you can use attributes like:

1. rel=preload with crossorigin = to remove FOUT (if you don't put crossorigin, it will ignore the preload).
2. as="font" type="font/woff2" = this helps the browser to prioritize the download of this resource
3. as will prioritize the preload too.
4. Preload will download and cache a resource, so the browser won't need to keep on dowloading the fonts.
5. You can use prefetch if you don't need a font immediately.
6. You can use preconnect when you need a resource soon, but the full link/url is stil unknown (for older browser it's dns-preconnect).
7. Prerender for a webpage that you know a lot of people will navigate too and you want to increase the render speed.
8. Modulepreload is used for when you need a ES module script soon. This is also exactly what I used for in this project.

Checking your Font Optimization

If you want to check the speed of your text being loaded in, you can load your application and run lighthouse. This will tell you the improvements you can make to your website or application regarding optimization.

Sources: https://wp-rocket.me/blog/guide-web-font-optimization/#section-3 https://dev.to/masakudamatsu/loading-google-fonts-and-any-other-web-fonts-as-fast-as-possible-in-early-2021-4f5o https://www.youtube.com/watch?v=vTf9HRTWKtM https://web.dev/codelab-preload-web-fonts/ https://3perf.com/blog/link-rels/