From 71c068bad2084f557aec67bdeb2b4e648b62d5d0 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 17 Jan 2026 09:20:58 +0300
Subject: [PATCH] feat(FontView): create a FontView component that adds a link
 to the head tag and applies font-family to the children

---
 src/features/ShowFont/ui/FontView.svelte | 40 ++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/features/ShowFont/ui/FontView.svelte

diff --git a/src/features/ShowFont/ui/FontView.svelte b/src/features/ShowFont/ui/FontView.svelte
new file mode 100644
index 0000000..3b387d3
--- /dev/null
+++ b/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>