| 1 | --- |
| 2 | /** |
| 3 | * Preloads the Latin subsets of the fonts visible in the header and above |
| 4 | * the fold, so they are fetched in parallel with the stylesheet instead of |
| 5 | * after it. Without this, every full navigation between marketing and |
| 6 | * Starlight pages briefly paints the fallback fonts (`font-display: swap`). |
| 7 | * |
| 8 | * The `?url` imports resolve to the same hashed asset URLs the fontsource |
| 9 | * `@font-face` rules reference, so the browser reuses the preloaded bytes. |
| 10 | */ |
| 11 | import serifItalic from "@fontsource-variable/source-serif-4/files/source-serif-4-latin-opsz-italic.woff2?url"; |
| 12 | import serifNormal from "@fontsource-variable/source-serif-4/files/source-serif-4-latin-opsz-normal.woff2?url"; |
| 13 | import inter from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url"; |
| 14 | |
| 15 | const fonts = [serifItalic, serifNormal, inter]; |
| 16 | --- |
| 17 | |
| 18 | { |
| 19 | fonts.map((href) => ( |
| 20 | <link rel="preload" href={href} as="font" type="font/woff2" crossorigin /> |
| 21 | )) |
| 22 | } |