Font loading causes Cumulative Layout Shift (CLS)

[jaygiang]

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

1. Go to PageSpeed Insights - /kratos/bring-your-own-ui/custom-ui-advanced-integration
2. Enter the docs URL
3. Click on Desktop tab
4. 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