Case Study: Analyzing Web Font Performance

Table of contents of the linked article Show archive.org snapshot :

What are Web Fonts?

• Advantages of Web Fonts
• Disadvantages of Web Fonts
  • Fallback Fonts
  • CSS3 @font Declaration Example
  • Fallback Font Example
  • Render Blocking and Critical Rendering Path
  • FOIT

Optimizing Web Font Delivery Further

• Prioritize Based On Browser Support
• Choose Only Styles You Need
• Character Sets
• Host Fonts Locally or Prefetch
• Store in LocalStorage with Base64 Encoding
• Another Method

Web Font Performance Tests

• Google Fonts Test
• Web Safe Font Test
• Local Fonts Test
• Third Party: Typekit Test

Summary

As you can see there are a lot of different ways you can improve your font performance. Two primary points you want to keep in mind are overall load times and then also first paint or render of your text, so you can avoid FOIT. Remember to run tests for 3G connections as well because mobile users might have a worse experience as opposed to desktop users.

Prioritize your font delivery based on browser support, choose only the styles and charsets you need, host with Google Fonts or locally, and experiment with storing in localStorage as well as using other methods such as Font Face Observer with font events.