font upgrades

src/app/(home)/page.tsx

···
           <div className="flex flex-col justify-center">
             <div className="space-y-4">
               <p className="font-medium text-xl">
-                Jasper Mayone [<i>he/they</i>]{" "}
+                <span style={{ fontFamily: "var(--font-balgin)" }}>
+                  Jasper Mayone [<i>he/they</i>]
+                </span>{" "}
                 <span className="text-gray-700 dark:text-white/70 font-normal">
                   is a 19-year-old college student from rural Vermont, currently
                   residing in Boston.

src/app/colophon/page.tsx

···
         <main className="flex-1">
           <div className="max-w-4xl mx-auto px-6 py-12">
             <div className="mb-16">
-              <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
+              <h1
+                className="text-4xl font-bold mb-4 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Colophon
               </h1>
               <p className="text-lg text-gray-600 dark:text-gray-300">
···
 
             {/* Site History Section */}
             <section className="mb-16">
-              <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2
+                className="text-2xl font-bold mb-6 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Site History
               </h2>
               <div className="border border-gray-200 dark:border-gray-700 rounded-2xl p-8">
···
 
             {/* Technology Stack Section */}
             <section className="mb-16">
-              <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2
+                className="text-2xl font-bold mb-6 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Technology Stack
               </h2>
               <div className="grid lg:grid-cols-2 gap-6">
···
                       <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                         {tech.name}
                       </h3>
-                      <span className="px-3 py-1 text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-full">
+                      <span
+                        className="px-3 py-1 text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-full"
+                        style={{ fontFamily: "var(--font-balgin)" }}
+                      >
                         {tech.category}
                       </span>
                     </div>
···
 
             {/* Hosting & Deployment Section */}
             <section className="mb-16">
-              <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2
+                className="text-2xl font-bold mb-6 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Hosting & Deployment
               </h2>
               <div className="border border-gray-200 dark:border-gray-700 rounded-2xl p-8">
···
                   , which provides seamless deployment from GitHub, automatic
                   HTTPS, and global CDN distribution.
                 </p>
-                <div className="flex flex-wrap gap-2">
+                <div
+                  className="flex flex-wrap gap-2"
+                  style={{ fontFamily: "var(--font-balgin)" }}
+                >
                   <span className="px-3 py-1 text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-full">
                     GitHub Integration
                   </span>
···
 
             {/* Development Tools Section */}
             <section className="mb-16">
-              <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2
+                className="text-2xl font-bold mb-6 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Development Tools
               </h2>
               <div className="border border-gray-200 dark:border-gray-700 rounded-2xl p-8">
···
 
             {/* Hardware Section */}
             <section className="mb-16">
-              <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
+              <h2
+                className="text-2xl font-bold mb-6 text-gray-900 dark:text-white"
+                style={{ fontFamily: "var(--font-balgin)" }}
+              >
                 Hardware
               </h2>
               <div className="border border-gray-200 dark:border-gray-700 rounded-2xl p-8">

src/app/concerts/page.tsx

···
         <MENU pageFirstWord="Concerts" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
+            <h1
+              className="text-xl font-bold mb-4 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
               Concerts I've Attended
             </h1>
 
···
             <div className="space-y-8">
               {sortedConcerts.map((yearGroup) => (
                 <div key={yearGroup.year}>
-                  <h2 className="text-lg font-semibold mb-3 text-gray-900 dark:text-white">
+                  <h2
+                    className="text-lg font-semibold mb-3 text-gray-900 dark:text-white"
+                    style={{ fontFamily: "var(--font-balgin)" }}
+                  >
                     {yearGroup.year}
                   </h2>
                   <ul className="space-y-3">
···
                               {concert.headliner}
                             </div>
                             {concert.openers && concert.openers.length > 0 && (
-                              <div className="text-sm text-gray-600 dark:text-gray-400">
+                              <div
+                                className="text-sm text-gray-600 dark:text-gray-400"
+                                style={{ fontFamily: "var(--font-balgin)" }}
+                              >
                                 with {concert.openers.join(", ")}
                               </div>
                             )}
                             {concert.tour && (
-                              <div className="text-sm text-gray-600 dark:text-gray-400">
+                              <div
+                                className="text-sm text-gray-600 dark:text-gray-400"
+                                style={{ fontFamily: "var(--font-balgin)" }}
+                              >
                                 {concert.tour}
                               </div>
                             )}
···
                               </div>
                             )}
                             {concert.setlist && (
-                              <div className="text-xs mt-1">
+                              <div
+                                className="text-xs mt-1"
+                                style={{ fontFamily: "var(--font-balgin)" }}
+                              >
                                 <a
                                   href={concert.setlist}
                                   target="_blank"

src/app/contact/page.tsx

···
         <MENU pageFirstWord="Contact" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
+            <h1
+              className="text-xl font-bold mb-4 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
               Get in Touch
             </h1>
 

src/app/elsewhere/page.tsx

···
         <MENU pageFirstWord="Elsewhere" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-2 text-gray-800 dark:text-white">
-              /elsewhere or /appearances
+            <h1
+              className="text-xl font-bold mb-2 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
+              My appearances elsewhere.
             </h1>
             <p className="text-gray-600 dark:text-white/70 mb-6 italic">
               a list of output or writings on sites other than one's own
···
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex-1 min-w-0">
                         <div className="flex items-start gap-2 mb-1">
-                          <h2 className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                          <h2
+                            className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"
+                            style={{ fontFamily: "var(--font-balgin)" }}
+                          >
                             {appearance.title}
                           </h2>
                           <ArrowUpRight className="w-4 h-4 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 flex-shrink-0 mt-0.5" />
···
                           {appearance.type && (
                             <>
                               <span>•</span>
-                              <span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">
+                              <span
+                                className="px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700"
+                                style={{ fontFamily: "var(--font-balgin)" }}
+                              >
                                 {appearance.type}
                               </span>
                             </>

src/app/error.tsx

···
         /> */}
 
         <div className="max-w-lg text-center">
-          <p className="inline">
+          <p className="inline" style={{ fontFamily: "var(--font-balgin)" }}>
             Uh oh! This page seems to have lost artistic direction. Please try
             to
           </p>{" "}

src/app/green/page.tsx

···
         <MENU pageFirstWord="Green" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
+            <h1
+              className="text-xl font-bold mb-4 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
               Living Green
             </h1>
 
···
               {/* Carbon Rating Card */}
               <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800/20">
                 <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-lg font-semibold text-gray-800 dark:text-white">
+                  <h2
+                    className="text-lg font-semibold text-gray-800 dark:text-white"
+                    style={{ fontFamily: "var(--font-balgin)" }}
+                  >
                     Website Carbon Rating
                   </h2>
                   <div className="flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30">
-                    <span className="text-2xl font-bold text-green-700 dark:text-green-400">
+                    <span
+                      className="text-2xl font-bold text-green-700 dark:text-green-400"
+                      style={{ fontFamily: "var(--font-balgin)" }}
+                    >
                       A
                     </span>
                   </div>
···
 
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                   <div className="text-center p-3 rounded-md bg-gray-50 dark:bg-gray-700/30">
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                    <div
+                      className="text-2xl font-bold text-gray-900 dark:text-white"
+                      style={{ fontFamily: "var(--font-balgin)" }}
+                    >
                       0.17g
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">
···
                   </div>
 
                   <div className="text-center p-3 rounded-md bg-gray-50 dark:bg-gray-700/30">
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                    <div
+                      className="text-2xl font-bold text-gray-900 dark:text-white"
+                      style={{ fontFamily: "var(--font-balgin)" }}
+                    >
                       20.7kg
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">
···
                   </div>
 
                   <div className="text-center p-3 rounded-md bg-gray-50 dark:bg-gray-700/30">
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                    <div
+                      className="text-2xl font-bold text-gray-900 dark:text-white"
+                      style={{ fontFamily: "var(--font-balgin)" }}
+                    >
                       0.47
                     </div>
                     <div className="text-xs text-gray-600 dark:text-gray-400">

src/app/keys/[key]/page.tsx

···
-// app/keys/[key]/page.tsx
 import FOOTER from "@/components/FOOTER";
 import MENU from "@/components/MENU";
 import { Button } from "@/components/ui/button";
···
   const downloadURL = buildDownloadURL(title, fileExtension);
   const fullDirectURL = `https://www.jaspermayone.com${directURL}`;
 
-  // Create import commands
   const sshImportCommand = `curl -s ${fullDirectURL} >> ~/.ssh/authorized_keys`;
   const gpgImportCommand = `curl -s ${fullDirectURL} | gpg --import`;
 
-  // Create structured data with breadcrumbs
   const keyPageSchema = {
     "@context": "https://schema.org",
     "@graph": [
···
           pageSecondWord="~"
           pageThirdWord={`${title}`}
         />
-        <main>
-          <div className="max-w-4xl mx-auto px-3 py-6">
-            <div className="border border-gray-200 dark:border-gray-700 rounded-2xl p-8">
-              {/* Key Details */}
-              <div className="mb-5">
-                <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
-                  Key Details
-                </h2>
-                <div className="space-y-4">
-                  <div>
-                    <span className="font-medium text-gray-900 dark:text-white">
-                      Fingerprint:
-                    </span>
-                    <p className="text-gray-600 dark:text-gray-300 font-mono text-sm mt-1 break-all">
+        <main className="min-h-screen">
+          <div
+            className="max-w-4xl mx-auto px-4 py-8 md:py-12"
+            style={{ fontFamily: "var(--font-balgin)" }}
+          >
+            {/* Header */}
+            <div className="mb-8">
+              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">
+                {title.toUpperCase()} Key
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400">
+                Public {title.toUpperCase()} key for secure authentication
+              </p>
+            </div>
+
+            {/* Quick Actions Card */}
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6 shadow-sm">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Quick Actions
+              </h2>
+              <div className="flex flex-col sm:flex-row gap-3">
+                <CopyButton label="Copy Key" valueToCopy={keyData} />
+                <Link href={downloadURL} className="flex-1 sm:flex-initial">
+                  <Button variant="outline" className="w-full">
+                    Download Key
+                  </Button>
+                </Link>
+              </div>
+            </div>
+
+            {/* Key Details Card */}
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6 shadow-sm">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-5">
+                Key Information
+              </h2>
+
+              <div className="space-y-5">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Fingerprint
+                  </label>
+                  <div className="bg-gray-50 dark:bg-gray-900 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <code className="text-sm font-mono text-gray-800 dark:text-gray-200 break-all">
                       {fingerprint}
-                    </p>
-                  </div>
-                  <div>
-                    <span className="font-medium text-gray-900 dark:text-white">
-                      Direct link:
-                    </span>
-                    <p className="mt-1">
-                      <Link href={directURL} className="lnk break-all">
-                        {directURL}
-                      </Link>
-                    </p>
+                    </code>
                   </div>
                 </div>
-              </div>
 
-              {/* Actions */}
-              <div className="border-t border-gray-200 dark:border-gray-700 pt-6 mb-8">
-                <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
-                  Actions
-                </h3>
-                <div className="flex flex-col sm:flex-row gap-4">
-                  <CopyButton label="Copy public key" valueToCopy={keyData} />
-                  <Link href={downloadURL}>
-                    <Button variant="outline" className="w-full sm:w-auto">
-                      <span className="mr-2">📥</span>
-                      Download public key
-                    </Button>
-                  </Link>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Direct Link
+                  </label>
+                  <div className="bg-gray-50 dark:bg-gray-900 px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <Link
+                      href={directURL}
+                      className="text-sm text-blue-600 dark:text-blue-400 hover:underline break-all font-mono"
+                    >
+                      {fullDirectURL}
+                    </Link>
+                  </div>
                 </div>
               </div>
+            </div>
 
-              {/* Import Command */}
-              <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
-                <h3 className="text-lg font-semibold mb-3 text-gray-900 dark:text-white">
+            {/* Import Command Card */}
+            {(title === "ssh" || title === "gpg") && (
+              <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
                   Import Command
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-                  Copy and run this command to import the key:
+                </h2>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                  Run this command in your terminal to import the key:
                 </p>
-                {title === "ssh" ? (
-                  <div className="space-y-3">
-                    <div className="bg-gray-100 dark:bg-gray-900 p-3 rounded border overflow-x-auto">
-                      <code className="text-xs whitespace-nowrap block font-mono text-gray-800 dark:text-gray-200">
-                        {sshImportCommand}
-                      </code>
-                    </div>
-                    <CopyButton
-                      label="Copy SSH import command"
-                      valueToCopy={sshImportCommand}
-                    />
+
+                <div className="space-y-3">
+                  <div className="bg-gray-900 dark:bg-black p-4 rounded-lg border border-gray-700 overflow-x-auto">
+                    <code className="text-sm font-mono text-green-400 block whitespace-nowrap">
+                      {title === "ssh" ? sshImportCommand : gpgImportCommand}
+                    </code>
                   </div>
-                ) : title === "gpg" ? (
-                  <div className="space-y-3">
-                    <div className="bg-gray-100 dark:bg-gray-900 p-3 rounded border overflow-x-auto">
-                      <code className="text-xs whitespace-nowrap block font-mono text-gray-800 dark:text-gray-200">
-                        {gpgImportCommand}
-                      </code>
-                    </div>
-                    <CopyButton
-                      label="Copy GPG import command"
-                      valueToCopy={gpgImportCommand}
-                    />
-                  </div>
-                ) : null}
+                  <CopyButton
+                    label={`Copy ${title.toUpperCase()} Import Command`}
+                    valueToCopy={
+                      title === "ssh" ? sshImportCommand : gpgImportCommand
+                    }
+                  />
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </main>
         <FOOTER />

src/app/layout.tsx

···
+import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeUpdater } from "@/components/theme-updater";
 import { redirects } from "@/lib/defs";
 import "@/styles/globals.css";
-import { ThemeProvider } from "@/components/theme-provider";
-import { ThemeUpdater } from "@/components/theme-updater";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import type { Metadata, Viewport } from "next";
+import { ViewTransitions } from "next-view-transitions";
 import localFont from "next/font/local";
 import Script from "next/script";
-import { ViewTransitions } from "next-view-transitions";
 
 const cuteNotes = localFont({
   src: [
     {
-      path: "../../public/fonts/CuteNotes.ttf",
+      path: "../../public/fonts/CuteNotes/CuteNotes.ttf",
       style: "normal",
     },
   ],
   variable: "--font-cuteNotes",
+});
+
+const balgin = localFont({
+  src: [
+    {
+      path: "../../public/fonts/Balgin/BalginText-Light.otf",
+      style: "normal",
+    },
+  ],
+  variable: "--font-balgin",
 });
 
 export const metadata: Metadata = {
···
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={cuteNotes.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${cuteNotes.variable} ${balgin.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         <meta charSet="utf-8" />
         <meta name="og:type" content="website" />
···
 
         <link rel="manifest" href="/site.webmanifest" />
       </head>
-      <body className={`${cuteNotes.variable} font-sans`}>
+      <body className={`${cuteNotes.variable} ${balgin.variable} font-sans`}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

src/app/panera/page.tsx

···
+import FOOTER from "@/components/FOOTER";
+import MENU from "@/components/MENU";
 import { PaneraCard } from "@/components/PaneraCard";
-import Image from "next/image";
 import { Metadata } from "next";
-import MENU from "@/components/MENU";
-import FOOTER from "@/components/FOOTER";
 import Script from "next/script";
 
 export const metadata: Metadata = {
···
               <div
                 className="text-3xl font-bold mb-4"
                 style={{
+                  fontFamily: "var(--font-balgin)",
                   color: "#051402",
                   fontWeight: 600,
                 }}
···
               </div>
               <p
                 className="text-gray-600 max-w-2xl mx-auto"
-                style={{ lineHeight: "1.6" }}
+                style={{ lineHeight: "1.6", fontFamily: "var(--font-balgin)" }}
               >
                 Inspired by people creating /chipotle pages with their Chipotle
                 order for when their friends get them Chipotle, here's what I

src/app/pfp/page.tsx

···
         <MENU pageFirstWord="PFPs" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
+            <h1
+              className="text-xl font-bold underline mb-4 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
               Profile Photos
             </h1>
 

src/app/podroll/page.tsx

···
         <MENU pageFirstWord="Podcasts" />
         <main className="flex-1">
           <div className="mx-5 mt-4 mb-4">
-            <h1 className="text-xl font-bold mb-2 text-gray-800 dark:text-white">
+            <h1
+              className="text-xl font-bold mb-2 text-gray-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
               Recommended Podcasts
             </h1>
 

src/app/portfolio/page.tsx

···
                         <span
                           key={tagIndex}
                           className="px-2 py-1 text-xs rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300"
+                          style={{ fontFamily: "var(--font-balgin)" }}
                         >
                           {tag}
                         </span>

src/app/to/page.tsx

···
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-8">All /to Routes</h1>
+        <h1
+          className="text-3xl font-bold mb-8"
+          style={{ fontFamily: "var(--font-balgin)" }}
+        >
+          All /to Routes
+        </h1>
 
         <div className="grid gap-4">
           {toRoutes.map((redirect) => (

src/components/FOOTER.tsx

···
         >
           <p
             className="text-xs text-center leading-relaxed break-words"
-            style={{ color: textColor }}
+            style={{ fontFamily: "var(--font-balgin)", color: textColor }}
           >
             ©{currentYear} Jasper Mayone. Made with &lt;3 in{" "}
             <i>Boston, Massachusetts</i>.

src/components/PageNavigation.tsx

···
                 title={`Go to ${item.slug}`}
                 style={
                   item.slug === selectedTab
-                    ? { ...textShadowStyle }
-                    : { color: textColor, ...textShadowStyle }
+                    ? { fontFamily: "var(--font-balgin)", ...textShadowStyle }
+                    : {
+                        fontFamily: "var(--font-balgin)",
+                        color: textColor,
+                        ...textShadowStyle,
+                      }
                 }
               >
                 /{item.slug}
···
             title={`see more pages`}
             style={
               showMoreDropdown
-                ? { ...textShadowStyle }
-                : { color: textColor, ...textShadowStyle }
+                ? { fontFamily: "var(--font-balgin)", ...textShadowStyle }
+                : {
+                    fontFamily: "var(--font-balgin)",
+                    color: textColor,
+                    ...textShadowStyle,
+                  }
             }
           >
             /more
···
                       handleMenuClick(item.slug);
                       setShowMoreDropdown(false);
                     }}
-                    style={{ color: textColor }}
+                    style={{
+                      fontFamily: "var(--font-balgin)",
+                      color: textColor,
+                    }}
                   >
                     /{item.slug}
                   </p>

src/components/PostList.tsx

···
 "use client";
 
-import { formatRelative, format } from "date-fns";
+import { formatRelative } from "date-fns";
 import { formatInTimeZone } from "date-fns-tz";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 interface Post {
   text: string;
···
       <div className="space-y-3">
         <div className="flex items-center justify-center py-8">
           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-600"></div>
-          <span className="ml-3 text-gray-600">Loading updates...</span>
+          <span
+            className="ml-3 text-gray-600"
+            style={{ fontFamily: "var(--font-balgin)" }}
+          >
+            Loading updates...
+          </span>
         </div>
       </div>
     );
···
       <div className="space-y-3">
         <div className="flex items-center justify-center py-8">
           <div className="text-red-600">
-            <p className="font-medium">Failed to load updates</p>
+            <p
+              className="font-medium"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
+              Failed to load updates
+            </p>
             <p className="text-sm mt-1">{error}</p>
           </div>
         </div>
···
     <div className="space-y-3">
       {postsToShow.map((post, index) => (
         <div key={index} className="flex items-start gap-3">
-          <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
+          <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 shrink-0"></div>
           <div className="flex-1">
-            <p className="text-gray-800">{post.text}</p>
+            <p
+              className="text-gray-800"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
+              {post.text}
+            </p>
             <p className="text-xs text-gray-500 mt-1">
               {formatTimeAgo(post.createdAt)}
             </p>

src/styles/globals.css

···
   --background-end-rgb: 0, 0, 0;
 }
 
-@font-face {
-  font-family: "Cute Notes";
-  src:
-    url("/fonts/CuteNotes.woff2") format("woff2"),
-    url("/fonts/CuteNotes.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
+/* Fonts are loaded via Next.js localFont in layout.tsx */
 
 body {
   /* font-family: "Cute Notes", sans-serif; */
···
   color: #56ba8e;
   text-decoration: underline wavy;
   transition: color 0.3s ease;
+  font-family: var(--font-balgin), sans-serif;
 }
 
 .lnk:hover {
   color: light-dark(#003e73, #aad5fb);
+}
+
+a {
+  font-family: var(--font-balgin), sans-serif;
 }
 
 /* View Transitions API Styles */

tailwind.config.ts

···
         foreground: "var(--foreground)",
       },
       fontFamily: {
-        // "cute-notes": ['"Cute Notes"', "sans-serif"],
         "cute-notes": "var(--font-cuteNotes)",
+        balgin: "var(--font-balgin)",
       },
       textDecorationStyle: {
         wavy: "wavy",