style: add font fallbacks

package.json

@@ -44,9 +44,11 @@
     "@fontsource/geist-mono": "^5.0.2",
     "@fontsource/geist-sans": "^5.0.2",
     "@fontsource/merriweather": "^5.0.12",
+    "@fontsource/noto-color-emoji": "^5.0.26",
     "@fontsource/zilla-slab": "^5.0.12",
     "bits-ui": "^0.21.2",
     "clsx": "^2.1.0",
+    "country-flag-icons": "^1.5.10",
     "marked": "^12.0.1",
     "marked-alert": "^2.0.1",
     "marked-katex-extension": "^5.0.1",

src/lib/app.css

@@ -76,6 +76,20 @@
 	}
 	body {
 		@apply bg-background text-foreground;
+		font-family:
+			Geist Sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			Oxygen,
+			Ubuntu,
+			Cantarell,
+			'Open Sans',
+			'Helvetica Neue',
+			sans-serif,
+			'Noto Color Emoji';
 	}
 }
 

src/lib/components/Footer.svelte

@@ -1,9 +1,10 @@
-<script>
+<script lang="ts">
 	import Separator from './ui/separator/separator.svelte';
 	import Socials from './Socials.svelte';
+	import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 </script>
 
-<footer class="h-24 px-2 mb-8 text-sm md:text-md xl:text-lg">
+<footer class="h-24 px-2 mb-10 text-sm md:text-md xl:text-lg">
 	<Separator class="mb-4" />
 	<div class="flex justify-center flex-col gap-4">
 		<Socials center />
@@ -21,6 +22,7 @@
 			<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
 				>View the source</a
 			>
+			| Long Live Palestine <span class="font-normal">{getUnicodeFlagIcon('PS')}</span>
 		</p>
 	</div>
 </footer>

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	import '@fontsource/geist-mono/latin.css';
 	import '@fontsource/zilla-slab/latin.css';
 	import '@fontsource/merriweather/latin.css';
+	import '@fontsource/noto-color-emoji';
 	import Footer from '$lib/components/Footer.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
 </script>