src/features/ShowFont/ui/FontView.svelte

@@ -0,0 +1,40 @@
+<!--
+    Component: FontView
+
+    Loads fonts from fontshare with link tag
+-->
+<script lang="ts">
+interface Props {
+    name: string;
+    slug: string;
+    id: string;
+    children?: import('svelte').Snippet;
+}
+
+let { name, slug, id, children }: Props = $props();
+let isLoaded = $state(false);
+
+// Construct the Fontshare API CSS URL
+// We specify the weight (400) or 'all'
+const cssUrl = $derived(`https://api.fontshare.com/v2/css?f[]=${id}&display=swap`);
+
+$effect(() => {
+    // Even though we use a link tag, we can still "watch"
+    // for the font to be ready for a smooth fade-in
+    document.fonts.load(`1em "${name}"`).then(() => {
+        isLoaded = true;
+    });
+});
+</script>
+
+<svelte:head>
+    <link rel="stylesheet" href={cssUrl} />
+</svelte:head>
+
+<div
+    style:--f={name}
+    style:font-family={name ? `'${name}', sans-serif` : 'inherit'}
+    class="transition-opacity duration-500 {isLoaded ? 'font-[var(--f)] opacity-100' : 'font-sans opacity-0'}"
+>
+    {@render children?.()}
+</div>