From 813ff13bf6311ebf955d1d368507f25314450acc Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Wed, 4 Feb 2026 19:28:06 +0000
Subject: [PATCH] font family displayed

---
 css/basteleur.css     |  3 ++-
 css/flor-de-ruina.css |  6 ++++--
 css/kaerukaeru.css    |  3 ++-
 css/ouroboros.css     |  3 ++-
 css/vg5000.css        |  3 ++-
 public/index.html     | 15 +++++++++++++++
 src/server.ts         |  2 +-
 7 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/css/basteleur.css b/css/basteleur.css
index 34c243e..976b4ff 100644
--- a/css/basteleur.css
+++ b/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;
diff --git a/css/flor-de-ruina.css b/css/flor-de-ruina.css
index e037748..0197050 100644
--- a/css/flor-de-ruina.css
+++ b/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;
diff --git a/css/kaerukaeru.css b/css/kaerukaeru.css
index b3117cd..a37b1b9 100644
--- a/css/kaerukaeru.css
+++ b/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;
diff --git a/css/ouroboros.css b/css/ouroboros.css
index 730cb72..56d9636 100644
--- a/css/ouroboros.css
+++ b/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;
diff --git a/css/vg5000.css b/css/vg5000.css
index c5c88fc..4a3d1a2 100644
--- a/css/vg5000.css
+++ b/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;
diff --git a/public/index.html b/public/index.html
index f5c3c4c..d307777 100644
--- a/public/index.html
+++ b/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);
diff --git a/src/server.ts b/src/server.ts
index a49c67c..ff23d0f 100644
--- a/src/server.ts
+++ b/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();