Switch to Playwrite US Modern + Imprima fonts

- Headings: Playwrite US Modern (extralight/200 weight)
- Body: Imprima (400 weight)
- Keep Geist Mono for code blocks

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package-lock.json

@@ -14,6 +14,8 @@
         "@astrojs/sitemap": "^3.6.0",
         "@fontsource/geist-mono": "^5.2.7",
         "@fontsource/geist-sans": "^5.2.5",
+        "@fontsource/imprima": "^5.2.8",
+        "@fontsource/playwrite-us-modern": "^5.2.7",
         "@tailwindcss/vite": "^4.1.13",
         "astro": "^5.13.9",
         "astro-pagefind": "^1.8.5",
@@ -757,6 +759,24 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource/imprima": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/imprima/-/imprima-5.2.8.tgz",
+      "integrity": "sha512-BdZ+OBW9Wc/P1qYLIbCKNxNgjKE1rn8d4pc0LdGs6uhph7z9nDAp9jtizhuhJgRGDBfxfC7w2jOsiEJ+xP77Xg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/playwrite-us-modern": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/playwrite-us-modern/-/playwrite-us-modern-5.2.7.tgz",
+      "integrity": "sha512-D1HNZKi3Vm4guvDe9eeXadjWJKREHk6mdGKmMABD1/Q8olcaeG034EZlTlhODNv/eoMFkzOzRAEr8bhaJC+UgQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",

package.json

@@ -16,6 +16,8 @@
     "@astrojs/sitemap": "^3.6.0",
     "@fontsource/geist-mono": "^5.2.7",
     "@fontsource/geist-sans": "^5.2.5",
+    "@fontsource/imprima": "^5.2.8",
+    "@fontsource/playwrite-us-modern": "^5.2.7",
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.9",
     "astro-pagefind": "^1.8.5",

src/components/Head.astro

@@ -2,24 +2,16 @@
 import "../styles/global.css";
 import { ClientRouter } from "astro:transitions";
 
-import "@fontsource/geist-sans/100.css";
+// Body font
-import "@fontsource/geist-sans/200.css";
+import "@fontsource/imprima/400.css";
-import "@fontsource/geist-sans/300.css";
+
-import "@fontsource/geist-sans/400.css";
+// Heading font (extralight = 200)
-import "@fontsource/geist-sans/500.css";
+import "@fontsource/playwrite-us-modern/200.css";
-import "@fontsource/geist-sans/600.css";
+import "@fontsource/playwrite-us-modern/300.css";
-import "@fontsource/geist-sans/700.css";
+import "@fontsource/playwrite-us-modern/400.css";
-import "@fontsource/geist-sans/800.css";
+
-import "@fontsource/geist-sans/900.css";
+// Keep mono font for code blocks
-import "@fontsource/geist-mono/100.css";
-import "@fontsource/geist-mono/200.css";
-import "@fontsource/geist-mono/300.css";
 import "@fontsource/geist-mono/400.css";
-import "@fontsource/geist-mono/500.css";
-import "@fontsource/geist-mono/600.css";
-import "@fontsource/geist-mono/700.css";
-import "@fontsource/geist-mono/800.css";
-import "@fontsource/geist-mono/900.css";
 
 interface Props {
   title: string;

src/pages/blog/[...id].astro

@@ -68,7 +68,7 @@ const { Content, headings } = await render(post);
           </div>
         )}        
       </div>
-      <h1 class="animate text-3xl font-semibold text-black dark:text-white">
+      <h1 class="animate text-3xl font-heading font-extralight text-black dark:text-white">
         {post.data.title}
       </h1>
       {

src/pages/index.astro

@@ -23,7 +23,7 @@ const projects: CollectionEntry<"projects">[] = (
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Container>
     <aside data-pagefind-ignore>
-      <h1 class="font-semibold text-black dark:text-white">
+      <h1 class="font-heading font-extralight text-black dark:text-white">
         👋
       </h1>
       <div class="space-y-16">
@@ -37,7 +37,7 @@ const projects: CollectionEntry<"projects">[] = (
 
         <section class="animate space-y-6">
           <div class="flex flex-wrap items-center justify-between gap-y-2">
-            <h2 class="font-semibold text-black dark:text-white">
+            <h2 class="font-heading font-extralight text-black dark:text-white">
               Latest posts
             </h2>
             <Link href="/blog"> See all posts </Link>
@@ -55,7 +55,7 @@ const projects: CollectionEntry<"projects">[] = (
 
         <section class="animate space-y-6">
           <div class="flex flex-wrap items-center justify-between gap-y-2">
-            <h2 class="font-semibold text-black dark:text-white">
+            <h2 class="font-heading font-extralight text-black dark:text-white">
               Recent projects
             </h2>
             <Link href="/projects"> See all projects </Link>
@@ -72,7 +72,7 @@ const projects: CollectionEntry<"projects">[] = (
         </section>
 
         <section class="animate space-y-4">
-          <h2 class="font-semibold text-black dark:text-white">
+          <h2 class="font-heading font-extralight text-black dark:text-white">
             Let's Connect
           </h2>
           <article>

src/pages/projects/[...id].astro

@@ -40,7 +40,7 @@ const { Content, headings } = await render(project);
           </div>
         )}     
       </div>
-      <h1 class="text-3xl font-semibold text-black dark:text-white">
+      <h1 class="text-3xl font-heading font-extralight text-black dark:text-white">
         {project.data.title}
       </h1>
       {

src/pages/tags/[...id].astro

@@ -33,7 +33,7 @@ const sortedPosts = posts.sort(
   <Container>
     <div class="space-y-10" data-pagefind-ignore>
       <BackToPrevious href="/tags"> All tags </BackToPrevious>
-      <h1 class="animate font-semibold text-black dark:text-white">
+      <h1 class="animate font-heading font-extralight text-black dark:text-white">
         Posts tagged with "{id}"
       </h1>
       <ul class="animate flex flex-col gap-4">

src/pages/tags/index.astro

@@ -10,7 +10,7 @@ const tags = [...new Set(posts.flatMap((post) => post.data.tags || []))].sort();
 <Layout title="Tags" description="List of tags used.">
   <Container>
     <div class="space-y-10">
-      <h1 class="animate font-semibold">All Tags</h1>
+      <h1 class="animate font-heading font-extralight text-black dark:text-white">All Tags</h1>
       <div class="animate flex flex-wrap gap-2">
         {
           tags.map((tag) => (

src/styles/global.css

@@ -5,8 +5,9 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: Geist Sans, ui-sans-serif, system-ui, sans-serif,
+  --font-sans: Imprima, ui-sans-serif, system-ui, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-heading: 'Playwrite US Modern', cursive;
   --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco,
     Consolas, 'Liberation Mono', 'Courier New', monospace;
 }
@@ -29,6 +30,10 @@
   }
 }
 
+@utility font-heading {
+  font-family: var(--font-heading);
+}
+
 @layer utilities {
   html {
     overflow-y: auto;
@@ -68,7 +73,7 @@
 
   article {
     @apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto;
-    @apply prose-headings:font-semibold;
+    @apply prose-headings:font-heading prose-headings:font-extralight;
     @apply prose-headings:text-black dark:prose-headings:text-white;
   }
 }