Problem
The site loads Cormorant Garamond via Google Fonts without preloading the most critical weights. This can cause a flash of unstyled text (FOUT) on slower connections, particularly visible for the display headings.
Solution
Add <link rel="preload"> hints in the <head> of each page for the primary Cormorant Garamond weights used in display contexts (typically 400 and 600, or whichever weights are used for headings and body).
<link rel="preload" href="[google-fonts-url]" as="style">
Alternatively, self-host the critical font weights using @font-face with font-display: optional to eliminate FOUT entirely on repeat visits. This is the more robust solution.
Audit which weights are actually used across all pages before implementing — only preload what is needed.
Acceptance criteria
- No visible FOUT on heading text on initial page load (tested on throttled connection)
- No layout shift as fonts load
- No regressions in font rendering across pages
Problem
The site loads Cormorant Garamond via Google Fonts without preloading the most critical weights. This can cause a flash of unstyled text (FOUT) on slower connections, particularly visible for the display headings.
Solution
Add
<link rel="preload">hints in the<head>of each page for the primary Cormorant Garamond weights used in display contexts (typically 400 and 600, or whichever weights are used for headings and body).Alternatively, self-host the critical font weights using
@font-facewithfont-display: optionalto eliminate FOUT entirely on repeat visits. This is the more robust solution.Audit which weights are actually used across all pages before implementing — only preload what is needed.
Acceptance criteria