diff --git a/public/index.html b/public/index.html
index b1e0333..0f40bc0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>fonts.ob248.com</title>
     <link rel="stylesheet" href="/index.css" />
-    <style id="font-import"></style>
+    <style id="font-import">/* FONT_IMPORT */</style>
   </head>
   <body class="page">
     <header class="decal-grid decal-grid--header">
@@ -21,27 +21,7 @@
 
     <main class="page__main">
       <section class="catalog">
-        <article class="font-card" data-font-card data-font-name="basteleur">
-          <div class="font-card__header">
-            <h2 class="font-card__title">BASTELEUR</h2>
-          </div>
-
-          <div class="font-card__demo">
-            <p class="font-card__demo-primary">
-              The quick brown fox jumps over the lazy dog.
-            </p>
-          </div>
-
-          <div class="font-card__footer">
-            <p class="font-card__label">IMPORT SNIPPET</p>
-            <div class="font-card__snippet">
-              <code class="font-card__code" data-import></code>
-              <button type="button" data-copy class="font-card__copy">
-                COPY
-              </button>
-            </div>
-          </div>
-        </article>
+        <!-- FONT_CARDS -->
       </section>
 
       <footer class="decal-grid" style="margin-top: 2rem; border-top: 1.5px solid var(--border-color); padding-top: 1rem;">
@@ -55,43 +35,59 @@
     </main>
 
     <script>
-      const copyButton = document.querySelector("[data-copy]");
-      const importOutput = document.querySelector("[data-import]");
-      const importStyle = document.querySelector("#font-import");
       const searchInput = document.querySelector("#font-search");
       const fontCards = document.querySelectorAll("[data-font-card]");
 
-      const importSnippet = `@import url("${window.location.origin}/basteleur");`;
+      const buildImportSnippet = (importUrl) => {
+        if (!importUrl) {
+          return "";
+        }
+        return `@import url("${window.location.origin}${importUrl}");`;
+      };
 
-      if (importStyle) {
-        importStyle.textContent = importSnippet;
-      }
+      const copyText = async (text) => {
+        try {
+          await navigator.clipboard.writeText(text);
+          return true;
+        } catch (error) {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.setAttribute("readonly", "true");
+          textarea.style.position = "absolute";
+          textarea.style.left = "-9999px";
+          document.body.appendChild(textarea);
+          textarea.select();
+          document.execCommand("copy");
+          document.body.removeChild(textarea);
+          return true;
+        }
+      };
 
-      if (importOutput) {
-        importOutput.textContent = importSnippet;
-      }
+      fontCards.forEach((card) => {
+        const importUrl = card.getAttribute("data-import-url");
+        const importSnippet = buildImportSnippet(importUrl);
+        const importOutput = card.querySelector("[data-import]");
+        const copyButton = card.querySelector("[data-copy]");
 
-      if (copyButton) {
-        copyButton.addEventListener("click", async () => {
-          try {
-            await navigator.clipboard.writeText(importSnippet);
-            copyButton.textContent = "Copied";
-            setTimeout(() => {
-              copyButton.textContent = "Copy";
-            }, 1500);
-          } catch (error) {
-            const textarea = document.createElement("textarea");
-            textarea.value = importSnippet;
-            textarea.setAttribute("readonly", "true");
-            textarea.style.position = "absolute";
-            textarea.style.left = "-9999px";
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand("copy");
-            document.body.removeChild(textarea);
-          }
-        });
-      }
+        if (importOutput) {
+          importOutput.textContent = importSnippet;
+        }
+
+        if (copyButton) {
+          copyButton.addEventListener("click", async () => {
+            if (!importSnippet) {
+              return;
+            }
+            const copied = await copyText(importSnippet);
+            if (copied) {
+              copyButton.textContent = "Copied";
+              setTimeout(() => {
+                copyButton.textContent = "Copy";
+              }, 1500);
+            }
+          });
+        }
+      });
 
       if (searchInput) {
         searchInput.addEventListener("input", (event) => {
diff --git a/src/server.ts b/src/server.ts
index ef4b92c..2f156ae 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -1,15 +1,108 @@
 import { readdir } from "node:fs/promises";
-import { join } from "node:path";
+import { join, parse } from "node:path";
 import { Hono } from "hono";
 import { serveStatic } from "hono/bun";
 
 const app = new Hono();
 
+const cssDir = "css";
+const templatePath = join("public", "index.html");
+const cardPlaceholder = "<!-- FONT_CARDS -->";
+const importPlaceholder = "/* FONT_IMPORT */";
+
+const escapeHtml = (value: string) =>
+	value
+		.replaceAll("&", "&amp;")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;")
+		.replaceAll('"', "&quot;")
+		.replaceAll("'", "&#39;");
+
+const escapeAttr = (value: string) => escapeHtml(value);
+
+const normalizeFamily = (value: string) => value.replace(/^['"]|['"]$/g, "").trim();
+
+const slugify = (value: string) =>
+	value
+		.toLowerCase()
+		.replace(/\s+/g, " ")
+		.trim();
+
+const parseFontFamilies = (css: string) => {
+	const families = new Set<string>();
+	const blocks = css.match(/@font-face\s*{[^}]*}/gms) ?? [];
+	for (const block of blocks) {
+		const match = block.match(/font-family\s*:\s*([^;]+);/i);
+		if (!match) {
+			continue;
+		}
+		const family = normalizeFamily(match[1]);
+		if (family) {
+			families.add(family);
+		}
+	}
+	return [...families];
+};
+
+const buildFontCatalog = async () => {
+	const entries = await readdir(cssDir, { withFileTypes: true });
+	const cssFiles = entries
+		.filter((entry) => entry.isFile() && entry.name.endsWith(".css"))
+		.map((entry) => entry.name)
+		.sort((a, b) => a.localeCompare(b));
+
+	const cards: string[] = [];
+	const importUrls: string[] = [];
+
+	for (const fileName of cssFiles) {
+		const baseName = parse(fileName).name;
+		const route = `/${baseName}`;
+		const filePath = join(cssDir, fileName);
+		const css = await Bun.file(filePath).text();
+		const families = parseFontFamilies(css);
+
+		if (families.length === 0) {
+			continue;
+		}
+
+		importUrls.push(route);
+
+		for (const family of families) {
+			const displayName = family || baseName;
+			const dataName = slugify(displayName);
+			const fontFamily = family || displayName;
+			const card = `\n        <article class="font-card" data-font-card data-font-name="${escapeAttr(
+				dataName,
+			)}" data-import-url="${escapeAttr(route)}">\n          <div class="font-card__header">\n            <h2 class="font-card__title">${escapeHtml(
+				displayName,
+			)}</h2>\n          </div>\n\n          <div class="font-card__demo">\n            <p class="font-card__demo-primary" style="font-family: '${escapeAttr(
+				fontFamily,
+			)}', serif;">\n              The quick brown fox jumps over the lazy dog.\n            </p>\n          </div>\n\n          <div class="font-card__footer">\n            <p class="font-card__label">IMPORT SNIPPET</p>\n            <div class="font-card__snippet">\n              <code class="font-card__code" data-import></code>\n              <button type="button" data-copy class="font-card__copy">\n                COPY\n              </button>\n            </div>\n          </div>\n        </article>`;
+			cards.push(card);
+		}
+	}
+
+	const importCss = importUrls
+		.map((url) => `@import url(\"${url}\");`)
+		.join("\n");
+
+	return {
+		cards: cards.join("\n"),
+		importCss,
+	};
+};
+
+const templateHtml = await Bun.file(templatePath).text();
+const { cards, importCss } = await buildFontCatalog();
+const indexHtml = templateHtml
+	.replace(cardPlaceholder, cards)
+	.replace(importPlaceholder, importCss);
+
+app.get("/", (c) => c.html(indexHtml));
+
 app.use("/fonts/*", serveStatic({ root: "." }));
 app.use("/*", serveStatic({ root: "./public" }));
 
-const cssDir = "css";
-
 const cssRoutes = async () => {
 	const entries = await readdir(cssDir, { withFileTypes: true });
 	for (const entry of entries) {
