Use Fraunces for blog headings

sites/art/src/styles/global.css

@@ -38,6 +38,8 @@
 }
 
 @theme {
+  --font-fraunces:
+    "Fraunces", Georgia, Cambria, "Times New Roman", Times, serif;
   --font-heliotrope:
     "Heliotrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen;
@@ -170,8 +172,13 @@
   }
 
   h1,
-  h2 {
-    @apply font-sans;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-fraunces);
+    letter-spacing: 0;
   }
 
   .mini-title {
@@ -262,3 +269,17 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  .blog-page-title {
+    @apply text-3xl font-semibold md:text-4xl;
+  }
+
+  .blog-post-title {
+    @apply text-2xl font-semibold md:text-3xl lg:text-4xl;
+  }
+
+  .blog-card-title-featured {
+    @apply text-xl font-semibold md:text-2xl;
+  }
+}