From f0a571916d8544a11bba2a16ba6f35d3de811e8b Mon Sep 17 00:00:00 2001 From: Bendik Aagaard Lynghaug Date: Thu, 6 Aug 2026 16:48:11 +0200 Subject: [PATCH] Quicksand: font-display optional, not swap, to stop the text-jump on scroll Confirmed via user testing that the jump was in DOM text below the hero (headings using Quicksand), not the YES canvas (which draws in plain Arial, unaffected). swap always paints the fallback font first then reflows once Quicksand loads - a real layout shift if that swap lands after the user has already scrolled past that heading, which is exactly what was happening. optional skips the swap entirely unless the font is already cached/ready almost immediately. --- style/main.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/style/main.css b/style/main.css index da452f1..5dd7745 100644 --- a/style/main.css +++ b/style/main.css @@ -2,12 +2,19 @@ dashboard elsewhere in this stack (see ~/repos/infrastructure/gitea-custom-header.tmpl) - reused as-is (same files, same unicode-range split) rather than pulled from a - font CDN. */ + font CDN. + font-display: optional, not swap, on all three: swap always shows + the fallback font first then reflows to Quicksand once it loads, + which is a real layout shift if that swap lands after the page is + already scrolled past that heading - reported as "text jumps" on + real mobile Safari. optional skips the swap entirely unless the + font is already cached/ready almost immediately, trading an + occasional fallback-font render for zero shift. */ @font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; - font-display: swap; + font-display: optional; src: url("/fonts/quicksand-semibold-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; } @@ -15,7 +22,7 @@ font-family: "Quicksand"; font-style: normal; font-weight: 600; - font-display: swap; + font-display: optional; src: url("/fonts/quicksand-semibold-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @@ -23,7 +30,7 @@ font-family: "Quicksand"; font-style: normal; font-weight: 600; - font-display: swap; + font-display: optional; src: url("/fonts/quicksand-semibold-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }