Skip to content

Fix font flash (FOUT) on page load#51

Open
bellisabell wants to merge 2 commits intomainfrom
bell/fix-font-fout
Open

Fix font flash (FOUT) on page load#51
bellisabell wants to merge 2 commits intomainfrom
bell/fix-font-fout

Conversation

@bellisabell
Copy link
Copy Markdown
Contributor

The Inter var font was loaded with font-display: swap, causing a visible flash of the wrong font on page load — especially noticeable on the homepage.

Fix:

  • Preload the main Inter latin roman woff2 file so the browser fetches it early
  • Override font-display to optional for the primary latin subset — this eliminates the swap flash entirely (if the font isn't cached yet, it uses the system fallback without swapping, then caches for subsequent loads)

After the first visit, the font is cached and loads instantly with no flash.

The Inter var font was loaded with font-display: swap, causing a flash
of unstyled text (wrong font) on page load, especially on the homepage.

Changes:
- Preload the main Inter latin roman woff2 file
- Override font-display to 'optional' for the primary latin subset,
  which eliminates the swap flash (uses fallback silently if font
  isn't cached, then caches for next load)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants