fonts: consolidate font-family to global stack, self-host subset emoji font

Remove redundant `font-family: sans-serif` from 18 component-level
declarations — they now inherit the Helvetica/Arial/Noto Sans stack
from the global `*` selector in app.css.

Add self-hosted NotoColorEmoji subset (56 KB, down from 11 MB) as
fallback for systems without the Noto Color Emoji font installed.
The subset is generated at prebuild time via pyftsubset with a fixed
list of the ~32 emojis actually used on the site.
This commit is contained in:
2026-02-16 21:34:06 +01:00
parent 44f34606d3
commit 068434fb7c
26 changed files with 76 additions and 35 deletions
+10 -1
View File
@@ -15,6 +15,15 @@
url(/fonts/crosses.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Color Emoji Subset';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/NotoColorEmoji.woff2) format('woff2'),
url(/fonts/NotoColorEmoji.ttf) format('truetype');
}
/* ============================================
COLOR SYSTEM
Based on Nord Theme with semantic naming
@@ -294,7 +303,7 @@ a:focus-visible {
/* Icon badge (circular icon container) */
.g-icon-badge {
font-family: "Noto Color Emoji", emoji, sans-serif;
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
display: flex;
align-items: center;
justify-content: center;