Optimize webfonts to improve loading performance
Request
Describe the problem
Website is using webfonts only in ttf format and fonts are loaded very late. Some users might experience seeing images loaded before text shows up.
Describe the solution
- Using woff and woff2 formats in addition to ttf format (for fallback) would improve website loading performance, as woff and woff2 fonts are usually 50% or even more smaller than ttf.
- Currently website is using two (or three?) different font families and two to four different width fonts for each one. It would be worth looking into reducing different font weights used. Using system fonts for article text is a valid solution too, just keep headings in custom fonts to provide some branding and design uniqueness.
- For even more modern solution it would be interesting to look into Variable fonts. Although a fallback would be required to provide good experience for everyone.
- "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading." says PageSpeed Insights test. Read more about font-display.