HASH a688a7814b58
DATE 2026-07-17
SUBJECT web: preload frame fonts, first paint sets in real metrics, no nav snap
FILES 1 CHANGED
HASH a688a7814b58
DATE 2026-07-17
SUBJECT web: preload frame fonts, first paint
sets in real metrics, no nav snap
FILES 1 CHANGED
┌─ ooknet-design/src/layouts/ArticleLayout/ArticleLayout.astro ──────────────┐
│ diff --git a/ooknet-design/src/layouts/ArticleLayout/ArticleLayout.astro b/ooknet- │
│ design/src/layouts/ArticleLayout/ArticleLayout.astro │
│ index 786ce49..2314452 100644 │
│ --- a/ooknet-design/src/layouts/ArticleLayout/ArticleLayout.astro │
│ +++ b/ooknet-design/src/layouts/ArticleLayout/ArticleLayout.astro │
│ @@ -9,6 +9,14 @@ import "@fontsource/cascadia-mono/700.css"; │
│ import "../../styles/global.scss"; │
│ import "./ArticleLayout.scss"; │
│ import Toast from "../../components/Toast/Toast.astro"; │
│ +// Preloaded so the first paint sets in the real fonts - otherwise the │
│ +// nav (and every frame) paints a few px off in fallback metrics, then │
│ +// snaps when the woff2 arrives: visible jitter on each navigation. │
│ +import cascadia400 from "@fontsource/cascadia-mono/files/cascadia-mono-latin-400- │
│ normal.woff2?url"; │
│ +import cascadia700 from "@fontsource/cascadia-mono/files/cascadia-mono-latin-700- │
│ normal.woff2?url"; │
│ +import plex400 from "@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-norm │
│ al.woff2?url"; │
│ +import plex600 from "@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-norm │
│ al.woff2?url"; │
│ +const preloadFonts = [cascadia400, cascadia700, plex400, plex600]; │
│ const { title = "OOKNET KB" } = Astro.props; │
│ --- │
│ <!doctype html> │
│ @@ -17,6 +25,9 @@ const { title = "OOKNET KB" } = Astro.props; │
│ <meta charset="utf-8" /> │
│ <meta name="viewport" content="width=device-width, initial-scale=1" /> │
│ <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> │
│ + {preloadFonts.map((href) => ( │
│ + <link rel="preload" as="font" type="font/woff2" crossorigin href={href} /> │
│ + ))} │
│ <title>{title}</title> │
│ <script is:inline> │
│ (() => { │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...cleLayout/ArticleLayout.astro ───┐
│ diff --git a/ooknet-design/src/layouts/Artic │
│ leLayout/ArticleLayout.astro b/ooknet-design │
│ /src/layouts/ArticleLayout/ArticleLayout.ast │
│ ro │
│ index 786ce49..2314452 100644 │
│ --- a/ooknet-design/src/layouts/ArticleLayou │
│ t/ArticleLayout.astro │
│ +++ b/ooknet-design/src/layouts/ArticleLayou │
│ t/ArticleLayout.astro │
│ @@ -9,6 +9,14 @@ import "@fontsource/cascadi │
│ a-mono/700.css"; │
│ import "../../styles/global.scss"; │
│ import "./ArticleLayout.scss"; │
│ import Toast from "../../components/Toast/T │
│ oast.astro"; │
│ +// Preloaded so the first paint sets in the │
│ real fonts - otherwise the │
│ +// nav (and every frame) paints a few px of │
│ f in fallback metrics, then │
│ +// snaps when the woff2 arrives: visible ji │
│ tter on each navigation. │
│ +import cascadia400 from "@fontsource/cascad │
│ ia-mono/files/cascadia-mono-latin-400-normal │
│ .woff2?url"; │
│ +import cascadia700 from "@fontsource/cascad │
│ ia-mono/files/cascadia-mono-latin-700-normal │
│ .woff2?url"; │
│ +import plex400 from "@fontsource/ibm-plex-m │
│ ono/files/ibm-plex-mono-latin-400-normal.wof │
│ f2?url"; │
│ +import plex600 from "@fontsource/ibm-plex-m │
│ ono/files/ibm-plex-mono-latin-600-normal.wof │
│ f2?url"; │
│ +const preloadFonts = [cascadia400, cascadia │
│ 700, plex400, plex600]; │
│ const { title = "OOKNET KB" } = Astro.props │
│ ; │
│ --- │
│ <!doctype html> │
│ @@ -17,6 +25,9 @@ const { title = "OOKNET KB │
│ " } = Astro.props; │
│ <meta charset="utf-8" /> │
│ <meta name="viewport" content="width=de │
│ vice-width, initial-scale=1" /> │
│ <link rel="icon" type="image/svg+xml" h │
│ ref="/favicon.svg" /> │
│ + {preloadFonts.map((href) => ( │
│ + <link rel="preload" as="font" type="f │
│ ont/woff2" crossorigin href={href} /> │
│ + ))} │
│ <title>{title}</title> │
│ <script is:inline> │
│ (() => { │
└──────────────────────────────────────────────┘
[ BACK TO LOG ]
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET