Merge pull request #12 from flexion/hero-monospace-intro

Add Figtree and Inter web fonts

Author: danielnaab

src/design/assets/fonts/figtree.woff2

@@ -11,7 +11,7 @@
   h1, h2, h3, h4 {
     line-height: 1.2;
     font-weight: 700;
-    font-family: var(--font-sans);
+    font-family: var(--font-display);
     margin-block-start: 1.5em;
     margin-block-end: 0.5em;
   }

src/design/assets/fonts/inter.woff2

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url('../assets/fonts/figtree.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../assets/fonts/inter.woff2') format('woff2');
+}

src/design/base.css

@@ -1,5 +1,6 @@
 @layer reset, tokens, base, compositions, layout, components, utilities;
 
+@import url("./fonts.css") layer(tokens);
 @import url("./reset.css") layer(reset);
 @import url("./tokens.css") layer(tokens);
 @import url("./base.css") layer(base);

src/design/fonts.css

@@ -52,7 +52,6 @@
     gap: var(--space-4);
   }
   .home-hero h1 {
-    font-family: var(--font-mono);
     font-size: var(--step-4);
     max-inline-size: 22ch;
   }

src/design/index.css

@@ -69,8 +69,9 @@
     --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
 
     /* ---------- Font stacks ---------- */
-    --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    --font-display: 'Figtree', ui-sans-serif, system-ui, sans-serif;
+    --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono:     ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 
     /* ---------- Measure ---------- */
     --measure-prose: 65ch;

src/design/layout.css

@@ -125,12 +125,12 @@ function TypographySection() {
   return (
     <section id="typography">
       <h2>Typography</h2>
-      <p>System font stack with a major-third (1.25) fluid type scale. Line height 1.5 for body, 1.15 for headings.</p>
+      <p>Figtree for headings, Inter for body text, with a major-third (1.25) fluid type scale. Line height 1.5 for body, 1.15 for headings.</p>
       <div class="l-stack">
-        <div><span style="font-size: var(--step-4); font-weight: 700; line-height: 1.15;">Step 4 — Page title</span></div>
-        <div><span style="font-size: var(--step-3); font-weight: 700; line-height: 1.15;">Step 3 — Section heading</span></div>
-        <div><span style="font-size: var(--step-2); font-weight: 700; line-height: 1.15;">Step 2 — Subsection</span></div>
-        <div><span style="font-size: var(--step-1); font-weight: 700; line-height: 1.15;">Step 1 — Card title</span></div>
+        <div><span style="font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1.15;">Step 4 — Page title</span></div>
+        <div><span style="font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.15;">Step 3 — Section heading</span></div>
+        <div><span style="font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.15;">Step 2 — Subsection</span></div>
+        <div><span style="font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.15;">Step 1 — Card title</span></div>
         <div><span style="font-size: var(--step-0);">Step 0 — Body text</span></div>
         <div><span style="font-size: var(--step--1);">Step −1 — Small text, labels</span></div>
       </div>