Repository navigation
The name waits for its font instead of swapping - #342
Merged
Merged
Conversation
With font-display: swap, a reload after GitHub Pages' 10-minute cache showed the name in Times New Roman for a moment, in lower case, as Cinzel Decorative has only capitals. The name now uses block: its space stays empty for those milliseconds, then it appears in Cinzel. Body text still swaps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On a reload after GitHub Pages' 10-minute cache, the browser revalidates the font, and with
font-display: swapthe name showed in Times New Roman for a moment, in lower case, since Cinzel Decorative has only capitals.The name's font now uses
font-display: block: its space stays empty for those milliseconds (no layout shift), then it appears in Cinzel. The font is preloaded and small, and the name fades in anyway. Body and title text keepswap, so reading never waits.Reproduced by delaying the font in Playwright; a new test checks the name's font is
blockand fails without the fix. 20 tests pass, Lighthouse included.