Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

fix: flash of unstyled content (fouc) when fonts load #139

Open
ramboz opened this issue Apr 10, 2023 · 0 comments
Open

fix: flash of unstyled content (fouc) when fonts load #139

ramboz opened this issue Apr 10, 2023 · 0 comments
Assignees
@ramboz
Labels
bug Something isn't working 🛑 Blocked Issue is blocked by external dependency
Milestone
Phase 4 - Go-live

Comments

@ramboz
Copy link
Collaborator

ramboz commented Apr 10, 2023

When the page initially loads, we have a FOUC when the fonts get loaded which creates a visual shift, and adds some CLS.

We have a few options to fix this:

  1. load the critical fonts part of the LCP in the eager phase (but will impact performance)
  2. Adjust the fallback font and size-adjust to closely match the final font. See https://www.hlx.live/developer/font-fallback
@ramboz ramboz added the bug Something isn't working label Apr 10, 2023
@ramboz ramboz self-assigned this Apr 26, 2023
@ramboz ramboz mentioned this issue Apr 26, 2023
Closed
@ramboz ramboz added the 🛑 Blocked Issue is blocked by external dependency label Apr 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ramboz ramboz

Labels
bug Something isn't working 🛑 Blocked Issue is blocked by external dependency
Projects
None yet
Milestone
Phase 4 - Go-live
Development

Successfully merging a pull request may close this issue.

feat: add font fallbacks to limit cls hlxsites/delta
1 participant
@ramboz