From e3f3253b48ab8d2c3f741581b08f0f7d8cf09fae Mon Sep 17 00:00:00 2001 From: Magnus Madsen Date: Mon, 3 Aug 2026 14:45:38 +0200 Subject: [PATCH 1/2] fix: load a real bold weight instead of synthesizing it Only Open Sans 400 was loaded, but the site asks for weight 700 in 56 places and Bootstrap sets headings to 500. Browsers cannot fail here, so they synthesize: the 400 outlines get dilated, closing up counters and rendering differently in every engine. Headings fell back to 400 and so rendered lighter than intended. Swap the single static weight for the variable font, which covers 300-800 in one file per subset. Bold and heading weights are now real outlines. The family name differs ('Open Sans Variable'), so global.css is updated to match, keeping the static name as a fallback. Latin subset grows from 18.6 KB to 48.3 KB. Two static weights would cost ~38 KB and still leave headings without their 500. Co-Authored-By: Claude Opus 5 (1M context) --- package-lock.json | 8 ++++---- package.json | 2 +- src/layouts/Layout.astro | 4 +++- src/styles/global.css | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5dbe201..fc59a47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.2.0", "dependencies": { "@astrojs/sitemap": "^3.7.3", - "@fontsource/open-sans": "^5.3.0", + "@fontsource-variable/open-sans": "^5.3.0", "@iconify-json/fa-brands": "^1.2.2", "@iconify-json/fa-solid": "^1.2.2", "@iconify-json/mdi": "^1.2.3", @@ -1148,10 +1148,10 @@ "node": ">=18" } }, - "node_modules/@fontsource/open-sans": { + "node_modules/@fontsource-variable/open-sans": { "version": "5.3.0", - "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.3.0.tgz", - "integrity": "sha512-V1bdMlGNyZrJwzrdusshMOw2YR0aqYDL7kOo9dkxUEKl8dFv66A9HLckOOXl572sG/7ohhDQrCrTFGSn9LZcSw==", + "resolved": "https://registry.npmjs.org/@fontsource-variable/open-sans/-/open-sans-5.3.0.tgz", + "integrity": "sha512-VOfhZfLIOBVa6K/dTEu7scqQXYdGa4jBX8quFpQ0S6574B+W2EOBJf9PkqyVtMEI7WWIWNEbpvPc3vY1mN2mmQ==", "license": "OFL-1.1", "funding": { "url": "https://github.com/sponsors/ayuhito" diff --git a/package.json b/package.json index e6f3954..fe26761 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ }, "dependencies": { "@astrojs/sitemap": "^3.7.3", - "@fontsource/open-sans": "^5.3.0", + "@fontsource-variable/open-sans": "^5.3.0", "@iconify-json/fa-brands": "^1.2.2", "@iconify-json/fa-solid": "^1.2.2", "@iconify-json/mdi": "^1.2.3", diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index b3cd156..34e8436 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,8 @@ --- import 'bootstrap/dist/css/bootstrap.min.css'; -import '@fontsource/open-sans/400.css'; +// Variable font: one file covers 300-800, so bold and heading weights are +// real rather than synthesized by the browser. +import '@fontsource-variable/open-sans'; interface Props { title: string; diff --git a/src/styles/global.css b/src/styles/global.css index de42d9b..83be29f 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,5 @@ body { - font-family: 'Open Sans', sans-serif; + font-family: 'Open Sans Variable', 'Open Sans', sans-serif; overflow-y: scroll; background-color: #efefef; } From 4ada9ecdfd4e9fae91f218a0b56ebc6d322f1e82 Mon Sep 17 00:00:00 2001 From: Magnus Madsen Date: Mon, 3 Aug 2026 14:47:38 +0200 Subject: [PATCH 2/2] style: keep headings at the regular weight Bootstrap sets h1-h6 to 500. That never rendered before, because only weight 400 was loaded, so headings silently fell back to regular. Now that the variable font supplies 500 the rule takes effect and headings read heavier than they used to. Pin them back to 400. Co-Authored-By: Claude Opus 5 (1M context) --- src/styles/global.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/global.css b/src/styles/global.css index 83be29f..499e9fd 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -4,6 +4,12 @@ body { background-color: #efefef; } +/* Bootstrap sets headings to 500. Now that the variable font actually has + that weight, keep headings at the regular weight instead. */ +h1, h2, h3, h4, h5, h6 { + font-weight: 400; +} + h1 { font-size: 2rem; margin-bottom: 0.75rem;