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/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;