fonts project

public/fonts.svg

@@ -0,0 +1,12 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
+	<style>
+		tspan { white-space:pre } 
+		.s0 { fill: #ded6c4 } 
+		.t1 { font-size: 150px;fill: #2e2b23;font-weight: 700;font-style: italic;font-family: "CommitMono-BoldItalic", "CommitMono" } 
+	</style>
+	<path id="Layer 1" fill-rule="evenodd" class="s0" d="m250 500c-138.25 0-250-111.75-250-250 0-138.25 111.75-250 250-250 138.25 0 250 111.75 250 250 0 138.25-111.75 250-250 250z"/>
+	<text id="f" style="transform: matrix(3.076,0,0,3.076,91.087,422.6)">
+		<tspan x="0" y="0" class="t1">f
+</tspan>
+	</text>
+</svg>

src/projects/fonts/index.tsx

@@ -0,0 +1,37 @@
+import { Demo } from "@/components/Demo";
+import { ProjectPage } from "@/components/ProjectPage";
+
+export const metadata = {
+	title: "fonts.ob248.com",
+	description: "A lightweight site for browsing and using my go-to fonts.",
+	date: "February 2026",
+	slug: "fonts",
+	image: "/fonts.svg",
+	url: "https://fonts.ob248.com",
+	hidden: false,
+	tags: ["Web", "Typography", "Hono", "HTML", "Bun"],
+	type: "personal",
+};
+
+export function FontsProject() {
+	return (
+		<ProjectPage metadata={metadata}>
+			<p className="mb-4 text-pretty">
+				fonts.ob248.com is a lightweight site for browsing and using my go-to
+				fonts. It simplifies the importing processign for .ttf and .otf fonts on
+				the web.
+			</p>
+
+			<div className="mt-4">
+				<h2 className="text-2xl text-accent mb-3 text-balance">Screenshots</h2>
+				<div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-4">
+					<Demo
+						image="/images/fonts/page.png"
+						title="Fonts page"
+						type="boxed"
+					/>
+				</div>
+			</div>
+		</ProjectPage>
+	);
+}