font family displayed

css/basteleur.css

@@ -15,7 +15,8 @@
 		url("https://fonts.ob248.com/fonts/Basteleur-Moonlight.woff2")
 		format("woff2"),
 		url("https://fonts.ob248.com/fonts/Basteleur-Moonlight.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/Basteleur-Moonlight.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/Basteleur-Moonlight.ttf")
+		format("truetype");
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

css/flor-de-ruina.css

@@ -4,7 +4,8 @@
 		url("https://fonts.ob248.com/fonts/FlorDeRuina-Germen.woff2")
 		format("woff2"),
 		url("https://fonts.ob248.com/fonts/FlorDeRuina-Germen.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/FlorDeRuina-Germen.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/FlorDeRuina-Germen.ttf")
+		format("truetype");
 	font-weight: 50;
 	font-style: normal;
 	font-display: swap;
@@ -16,7 +17,8 @@
 		url("https://fonts.ob248.com/fonts/FlorDeRuina-Semilla.woff2")
 		format("woff2"),
 		url("https://fonts.ob248.com/fonts/FlorDeRuina-Semilla.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/FlorDeRuina-Semilla.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/FlorDeRuina-Semilla.ttf")
+		format("truetype");
 	font-weight: 80;
 	font-style: normal;
 	font-display: swap;

css/kaerukaeru.css

@@ -4,7 +4,8 @@
 		url("https://fonts.ob248.com/fonts/kaerukaeru-Regular.woff2")
 		format("woff2"),
 		url("https://fonts.ob248.com/fonts/kaerukaeru-Regular.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/kaerukaeru-Regular.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/kaerukaeru-Regular.ttf")
+		format("truetype");
 	font-weight: 80;
 	font-style: normal;
 	font-display: swap;

css/ouroboros.css

@@ -3,7 +3,8 @@
 	src:
 		url("https://fonts.ob248.com/fonts/Ouroboros-Regular.woff2") format("woff2"),
 		url("https://fonts.ob248.com/fonts/Ouroboros-Regular.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/Ouroboros-Regular.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/Ouroboros-Regular.ttf")
+		format("truetype");
 	font-weight: 80;
 	font-style: normal;
 	font-display: swap;

css/vg5000.css

@@ -4,7 +4,8 @@
 		url("https://fonts.ob248.com/fonts/VG5000-Regular_web.woff2")
 		format("woff2"),
 		url("https://fonts.ob248.com/fonts/VG5000-Regular_web.woff") format("woff"),
-		url("https://fonts.ob248.com/fonts/VG5000-Regular_web.ttf") format("truetype");
+		url("https://fonts.ob248.com/fonts/VG5000-Regular_web.ttf")
+		format("truetype");
 	font-weight: 80;
 	font-style: normal;
 	font-display: swap;

public/index.html

@@ -78,7 +78,11 @@
         const importUrl = card.getAttribute("data-import-url");
         const importSnippet = buildImportSnippet(importUrl);
         const importOutput = card.querySelector("[data-import]");
+        const snippet = card.querySelector(".font-card__snippet");
         const copyButton = card.querySelector("[data-copy]");
+        const familyName = card
+          .querySelector(".font-card__title")
+          ?.textContent?.trim();
         const weightSelect = card.querySelector("[data-weight-select]");
         const weightRange = card.querySelector("[data-weight-range]");
         const demoText = card.querySelector("[data-demo]");
@@ -105,6 +109,17 @@
           importOutput.textContent = importSnippet;
         }
 
+        if (snippet && familyName) {
+          const familyOutput = document.createElement("span");
+          familyOutput.className = "font-card__family";
+          familyOutput.textContent = `font-family: "${familyName}";`;
+          if (copyButton) {
+            snippet.insertBefore(familyOutput, copyButton);
+          } else {
+            snippet.appendChild(familyOutput);
+          }
+        }
+
         if (!weightRange && !weightSelect) {
           if (demoText && Number.isFinite(defaultWeight)) {
             demoText.style.fontWeight = String(defaultWeight);

src/server.ts

@@ -1,6 +1,6 @@
 import { readdir } from "node:fs/promises";
 import { join, parse } from "node:path";
-import { Hono, type Context } from "hono";
+import { type Context, Hono } from "hono";
 import { serveStatic } from "hono/bun";
 
 const app = new Hono();