ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: zero font jumping on navigation — preload both brand fonts + font-display: optional (no late swaps; brand-approved Arial if cold)

Browse Source
This commit is contained in:
ctao
2026-07-25 15:36:31 +02:00
parent 075d44dce3
commit e7c804c9da
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+1
View File
@@ -45,6 +45,7 @@ const links = [
{/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines), {/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines),
self-hosted latin woff2 (variable) — @font-face lives in global.css. */} self-hosted latin woff2 (variable) — @font-face lives in global.css. */}
<link rel="preload" href="/fonts/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="/fonts/space-grotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin />
</head> </head>
<body class={ambient ? 'has-ambient' : undefined}> <body class={ambient ? 'has-ambient' : undefined}>
<a class="skip" href="#main">Skip to content</a> <a class="skip" href="#main">Skip to content</a>
src/styles/global.css
+2 -2
View File
@@ -75,12 +75,12 @@
/* Self-hosted brand fonts — latin subset, variable weight, swap + metric-matched fallback */ /* Self-hosted brand fonts — latin subset, variable weight, swap + metric-matched fallback */
@font-face { @font-face {
font-family: "Inter"; font-weight: 400 700; font-display: swap; font-family: "Inter"; font-weight: 400 700; font-display: optional;
src: url("/fonts/inter-latin.woff2") format("woff2"); src: url("/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }
@font-face { @font-face {
font-family: "Space Grotesk"; font-weight: 500 700; font-display: swap; font-family: "Space Grotesk"; font-weight: 500 700; font-display: optional;
src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }