How to Mitigate Drawbacks of Web Fonts?
You can minimize the negative impact of web fonts over website performance through following measures.
Use 1 or 2 Web Fonts
Do not overuse different fonts. According to Google Fonts, “If your website uses many web fonts, it will load (open) slower.”
In my understanding, you should not use over 4 web fonts. Using 1 font (both for heading and body text) for the website is quite a great and safe decision. → Watch Video Tutorial below.
Use Limited Font Weights
Do not download or use a font with all available styling options. For example, if you need a font in 400 weight, then no need to use other weight options. This consideration will minimize the file size of a font. Google Fonts suggests, “Most websites don't need more than three weights for a given family.”
Compress Web Font
You should optimize your favorite font for fast loading, instead of aggressively spending energy in search of web safe system fonts. Use WOFF2 compression for your web font.
Use Only Necessary Font Subsets
To keep font file size low, do not use unnecessary font variation subsets such as bold, light, and italic. It is a good idea to use only regular font variation for body text and any bold variation for headings.
Deactivate Comments on Website
Do not use comments on your website. Users may comment in various languages and browsers has to download particular scripts to display text used in comments. It is a better idea to refer users to social platforms (Facebook or YouTube) for any discussion on the topic.
Use Font Preloading and Font Display Descriptor
You can instruct browser to load font files earlier than other assets such as images or videos. You can do it through Link Rel Preload declaration.
According to Chromium, you can use Font Display Descriptor for @font-face, to harmonize and control the rendering of fonts. It smoothly adjusts text size of primary web font with fallback or system font. [RD]
Thus, Chrome 92 descriptor, reduces cumulative layout shift by matching up the fallback font and primary web font. It is another reason, using web safe fonts should not be mandatory, these days. You can use a web font without any worry.
Explore more articles about Fonts, or visit Home Page of Dozro website.
