Font loading causes Cumulative Layout Shift (CLS) #2409
Description
Preflight checklist
- I could not find a solution in the existing issues, docs, nor discussions.
- I agree to follow this project's Code of Conduct.
- I have read and am following this repository's Contribution Guidelines.
- I have joined the Ory Community Slack.
- I am signed up to the Ory Security Patch Newsletter.
Ory Network Project
No response
Describe the bug
The docs site experiences layout shift when custom fonts load because the fallback fonts (sans-serif, monospace) have different metrics than our web fonts (Inter, JetBrains Mono). This causes visible "jank" as text reflows when fonts swap in.
This seems to negatively impact Core Web Vitals CLS score.
Reproducing the bug
PageSpeed Insights
- Go to PageSpeed Insights - /kratos/bring-your-own-ui/custom-ui-advanced-integration
- Enter the docs URL
- Click on Desktop tab
- Scroll down and click Layout shift culprits to expand
Chrome DevTools Performance Tab
Relevant log output
Relevant configuration
Version
1.0.0
On which operating system are you observing this issue?
None
In which environment are you deploying?
None
Additional Context
No response