Variable Fonts Performance Tests

Test Cases

1. Roboto Static from Google CDN:
   • Pulled from Google Fonts (all 12 variations, Latin character set).
   • For more information, see the Google Fonts Info directory in the GitHub repo (added for educational purposes). However, note that in this test case, both the @font-face rules and the 12 font files are pulled from the Google CDN and they are not present on your server.
   • Self-hosted files:
     • index.html
     • style.css
   • Files on CDN:
     • fonts.css
     • 12 WOFF2 files
2. Roboto Static Self-Hosted:
   • Custom font pack generated with Google Webfonts Helper.
   • In the CSS, I only used the WOFF2 format to make this test case similar to the two others (however, in production, you should also add the WOFF format to support all modern browsers, and both WOFF and TTF (and probably EOT) to also support older browsers).
   • Self-hosted files:
     • index.html
     • style.css
     • fonts.css
     • 12 WOFF2 files
3. Roboto Variable Self-Hosted:
   • Roboto Variable Font, cloned from TypeNetwork's GitHub repo and converted from TTF to WOFF2 using Google's woff2 tool.
   • Self-hosted files:
     • index.html
     • style.css
     • fonts.css
     • 1 WOFF2 file
4. Additional Test Case:
   • Pulled from Google CDN (4 variations: Roboto Light, Roboto Regular, Roboto Regular Italic, Roboto Bold).
   • Self-hosted files:
     • index.html
     • style.css
   • Files on CDN:
     • fonts.css
     • 4 WOFF2 files

Test Code

• The index.html file is identical in all three cases. It consists of 12 paragraphs — each displays a different variation of the Roboto font (such as Roboto Thin, Roboto Light, etc).
• The style.css file is identical in Test Case #1 and Test Case #2.
• In Test Case #3, style.css uses the font-style: oblique 12deg; rule instead of font-style: italic; because the Roboto Variable Font uses the slant (slnt) axis instead of italics (ital). See more in the MDN Docs. Otherwise, it's identical to style.css in Test Case #1 and Test Case #2.

Recommended Test Environment

• Browser: Chrome in Incognito Mode (to eliminate the impact of Chrome extensions on the page load time).
• Performance testing tools used in the test:
  • GTMetrix
  • Chrome DevTools with Lighthouse
    • Performance report on an emulated desktop (run Lighthouse report in the 'Audit' tab).
    • Cache disabled (feature available in the 'Network' tab).