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.
2026-02-16 21:34:06 +01:00
parent 2024551e0e
commit e58c8e46ef
26 changed files with 76 additions and 35 deletions
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"prebuild": "npx vite-node scripts/generate-mystery-verses.ts",
+		"prebuild": "bash scripts/subset-emoji-font.sh && npx vite-node scripts/generate-mystery-verses.ts",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
--- a/scripts/subset-emoji-font.sh
+++ b/scripts/subset-emoji-font.sh
@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+# Subset NotoColorEmoji to only the emojis we actually use.
+# Requires: fonttools (provides pyftsubset) and woff2 (provides woff2_compress)
+#
+# Source font: system-installed NotoColorEmoji.ttf
+# Output: static/fonts/NotoColorEmoji.woff2 + .ttf
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+OUT_DIR="$PROJECT_ROOT/static/fonts"
+
+SRC_FONT="/usr/share/fonts/noto/NotoColorEmoji.ttf"
+
+if [ ! -f "$SRC_FONT" ]; then
+	echo "Error: Source font not found at $SRC_FONT" >&2
+	exit 1
+fi
+
+# ─── Fixed list of emojis to include ────────────────────────────────
+# Recipe icons (from database + hardcoded)
+# Season/liturgical: ☀️ ✝️ ❄️ 🌷 🍂 🎄 🐇
+# Food/recipe: 🍽️ 🥫
+# UI/cospend categories: 🛒 🛍️ 🚆 ⚡ 🎉 🤝 💸
+# Status/feedback: ❤️ 🖤 ✅ ❌ 🚀 ⚠️ ✨ 🔄
+# Features: 📋 🖼️ 📖 🤖 🌐 🔐 🔍 🚫
+
+EMOJIS="☀✝❄🌷🍂🎄🐇🍽🥫🛒🛍🚆⚡🎉🤝💸❤🖤✅❌🚀⚠✨🔄📋🖼📖🤖🌐🔐🔍🚫"
+# ────────────────────────────────────────────────────────────────────
+
+# Build Unicode codepoint list from the emoji string
+UNICODES=""
+for char in $(echo "$EMOJIS" | grep -oP '.'); do
+	code=$(printf 'U+%04X' "'$char")
+	if [ -n "$UNICODES" ]; then
+		UNICODES="$UNICODES,$code"
+	else
+		UNICODES="$code"
+	fi
+done
+
+echo "Subsetting NotoColorEmoji with $(echo "$EMOJIS" | grep -oP '.' | wc -l) glyphs..."
+
+# Subset to TTF
+pyftsubset "$SRC_FONT" \
+	--unicodes="$UNICODES" \
+	--output-file="$OUT_DIR/NotoColorEmoji.ttf" \
+	--no-ignore-missing-unicodes
+
+# Convert to WOFF2
+woff2_compress "$OUT_DIR/NotoColorEmoji.ttf"
+
+ORIG_SIZE=$(stat -c%s "$SRC_FONT" 2>/dev/null || stat -f%z "$SRC_FONT")
+TTF_SIZE=$(stat -c%s "$OUT_DIR/NotoColorEmoji.ttf" 2>/dev/null || stat -f%z "$OUT_DIR/NotoColorEmoji.ttf")
+WOFF2_SIZE=$(stat -c%s "$OUT_DIR/NotoColorEmoji.woff2" 2>/dev/null || stat -f%z "$OUT_DIR/NotoColorEmoji.woff2")
+
+echo "Done!"
+echo "  Original: $(numfmt --to=iec "$ORIG_SIZE")"
+echo "  TTF:      $(numfmt --to=iec "$TTF_SIZE")"
+echo "  WOFF2:    $(numfmt --to=iec "$WOFF2_SIZE")"
--- a/src/app.css
+++ b/src/app.css
@@ -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;
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -116,7 +116,6 @@ nav[hidden]{
 :global(.site_header li>a)
 {
 	text-decoration: none;
-	font-family: sans-serif;
 	font-size: 1.2rem;
 	color: inherit;
 	border-radius: var(--radius-pill);
@@ -127,7 +126,6 @@ nav[hidden]{
 :global(a.entry:visited)
 {
 	text-decoration: none;
-	font-family: sans-serif;
 	font-size: 1.2rem;
 	color: white !important;
 	border-radius: var(--radius-pill);
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -16,7 +16,6 @@
 input {
 	all: unset;
 	box-sizing: border-box;
-	font-family: sans-serif;
 	background: var(--nord0);
 	color: #fff;
 	padding: 0.7rem 2rem;
--- a/src/lib/components/TagCloud.svelte
+++ b/src/lib/components/TagCloud.svelte
@@ -7,7 +7,6 @@ div{
 	margin-inline:auto;
 	gap: 1rem;
 	justify-content: space-evenly;
-	font-family: sans-serif;
 }
 </style>

--- a/src/lib/components/recipes/BaseRecipeSelector.svelte
+++ b/src/lib/components/recipes/BaseRecipeSelector.svelte
@@ -108,7 +108,6 @@ dialog[open]::backdrop {

 dialog h2 {
 	font-size: 3rem;
-	font-family: sans-serif;
 	color: white;
 	text-align: center;
 	margin-top: 30vh;
--- a/src/lib/components/recipes/Card.svelte
+++ b/src/lib/components/recipes/Card.svelte
@@ -62,7 +62,6 @@ const img_alt = $derived(
 	transition: var(--transition-normal);
 	text-decoration: none;
 	box-sizing: border-box;
-	font-family: sans-serif;
 	cursor: pointer;
 	height: 525px;
 	width: 300px;
--- a/src/lib/components/recipes/CardAdd.svelte
+++ b/src/lib/components/recipes/CardAdd.svelte
@@ -130,7 +130,6 @@ function remove_on_enter(event: KeyboardEvent, tag: string) {
 	text-decoration: none;
 	position: relative;
 	box-sizing: border-box;
-	font-family: sans-serif;
 	width: var(--card-width);
 	aspect-ratio: 4/7;
 	border-radius: var(--radius-card);
--- a/src/lib/components/recipes/CategoryFilter.svelte
+++ b/src/lib/components/recipes/CategoryFilter.svelte
@@ -134,7 +134,6 @@
 	input {
 		all: unset;
 		box-sizing: border-box;
-		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
 		padding: 0.5rem 0.7rem;
--- a/src/lib/components/recipes/CreateIngredientList.svelte
+++ b/src/lib/components/recipes/CreateIngredientList.svelte
@@ -450,7 +450,6 @@ input.heading:hover{
 	--font_size: 1.5rem;
 	top: -1em;
 	left: -1em;
-	font-family: sans-serif;
 	font-size: 1.5rem;
 	background-color: var(--nord0);
 	color: var(--nord4);
@@ -471,7 +470,6 @@ input.heading:hover{
 }

 .add_ingredient{
-	font-family: sans-serif;
 	width: 100%;
 	display: flex;
 	flex-direction: row;
@@ -537,7 +535,6 @@ dialog .adder{
 }
 dialog h2{
 	font-size: 3rem;
-	font-family: sans-serif;
 	color: white;
 	text-align: center;
 	margin-top: 30vh;
--- a/src/lib/components/recipes/CreateStepList.svelte
+++ b/src/lib/components/recipes/CreateStepList.svelte
@@ -496,7 +496,6 @@ dialog .adder{
 	--font_size: 1.5rem;
 	top: -1em;
 	left: -1em;
-	font-family: sans-serif;
 	font-size: 1.5rem;
 	background-color: var(--nord0);
 	color: var(--nord4);
@@ -519,7 +518,6 @@ dialog .adder{
 }

 .add_step p{
-	font-family: sans-serif;
 	width: 100%;
 	font-size: 1.2rem;
 	border-radius: var(--radius-card);
@@ -550,7 +548,6 @@ dialog .adder{
 }
 dialog h2{
 	font-size: 3rem;
-	font-family: sans-serif;
 	color: white;
 	text-align: center;
 	margin-top: 30vh;
--- a/src/lib/components/recipes/EditRecipeNote.svelte
+++ b/src/lib/components/recipes/EditRecipeNote.svelte
@@ -25,7 +25,6 @@ textarea {
 	font-size: 1rem;
 	resize: vertical;
 	margin-top: 0.5em;
-	font-family: sans-serif;
 	background-color: transparent;
 }
 textarea::placeholder {
--- a/src/lib/components/recipes/Icon.svelte
+++ b/src/lib/components/recipes/Icon.svelte
@@ -4,7 +4,7 @@
 </script>
 <style>
 	a{
-		font-family: "Noto Color Emoji", emoji;
+		font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji;
 		font-size: 2rem;
 		text-decoration: none;
 		padding: 0.5em;
--- a/src/lib/components/recipes/IconFilter.svelte
+++ b/src/lib/components/recipes/IconFilter.svelte
@@ -126,7 +126,7 @@
 	input {
 		all: unset;
 		box-sizing: border-box;
-		font-family: "Noto Color Emoji", emoji, sans-serif;
+		font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
 		padding: 0.5rem 0.7rem;
@@ -146,7 +146,6 @@

 	input::placeholder {
 		color: var(--nord4);
-		font-family: sans-serif;
 	}

 	input:hover {
--- a/src/lib/components/recipes/IconLayout.svelte
+++ b/src/lib/components/recipes/IconLayout.svelte
@@ -26,7 +26,7 @@

 <style>
 	a{
-		font-family: "Noto Color Emoji", emoji, sans-serif;
+		font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
 		font-size: 2rem;
 		text-decoration: none;
 		padding: 0.5em;
--- a/src/lib/components/recipes/IngredientsPage.svelte
+++ b/src/lib/components/recipes/IngredientsPage.svelte
@@ -308,9 +308,6 @@ function adjust_amount(string, multiplier){
 // No need for complex yeast toggle handling - everything is calculated server-side now
 </script>
 <style>
-*{
-font-family: sans-serif;
-}
 .ingredients{
 	flex-basis: 0;
 	flex-grow: 1;
--- a/src/lib/components/recipes/InstructionsPage.svelte
+++ b/src/lib/components/recipes/InstructionsPage.svelte
@@ -100,9 +100,6 @@ const labels = $derived({
 });
 </script>
 <style>
-*{
-font-family: sans-serif;
-}
 ol li::marker{
 	font-weight: bold;
 	color: var(--blue);
--- a/src/lib/components/recipes/Search.svelte
+++ b/src/lib/components/recipes/Search.svelte
@@ -307,7 +307,6 @@
 input#search {
  all: unset;
  box-sizing: border-box;
-  font-family: sans-serif;
  background: var(--nord0);
  color: #fff;
  padding: 0.7rem 2rem;
--- a/src/lib/components/recipes/SeasonFilter.svelte
+++ b/src/lib/components/recipes/SeasonFilter.svelte
@@ -120,7 +120,6 @@
 	input {
 		all: unset;
 		box-sizing: border-box;
-		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
 		padding: 0.5rem 0.7rem;
--- a/src/lib/components/recipes/SeasonLayout.svelte
+++ b/src/lib/components/recipes/SeasonLayout.svelte
@@ -28,7 +28,6 @@
 <style>
 a.month{
 	text-decoration: unset;
-	font-family: sans-serif;
 	border-radius: var(--radius-pill);
 	background-color: var(--blue);
 	color: var(--nord5);
--- a/src/lib/components/recipes/TagFilter.svelte
+++ b/src/lib/components/recipes/TagFilter.svelte
@@ -117,7 +117,6 @@
 	input {
 		all: unset;
 		box-sizing: border-box;
-		font-family: sans-serif;
 		background: var(--nord0);
 		color: var(--nord6);
 		padding: 0.5rem 0.7rem;
--- a/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/[name]/+page.svelte
@@ -106,9 +106,6 @@
 	});
 </script>
 <style>
-*{
-font-family: sans-serif;
-}
 h1{
 	text-align: center;
 	padding-block: 0.5em;
--- a/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/icon/+page.svelte
@@ -14,7 +14,7 @@
 </svelte:head>
 <style>
 	a{
-		font-family: "Noto Color Emoji", emoji, sans-serif;
+		font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
 		--padding: 0.5em;
 		font-size: 3rem;
 		text-decoration: none;
--- a/static/fonts/NotoColorEmoji.ttf
+++ b/static/fonts/NotoColorEmoji.ttf
--- a/static/fonts/NotoColorEmoji.woff2
+++ b/static/fonts/NotoColorEmoji.woff2