install fonts and use them

earth-walker · earth-walker · commit 2144ad767e38 · 2026-01-22T19:16:14.000-05:00
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@astrojs/svelte": "^7.2.3",
+    "@fontsource/open-sans": "^5.2.7",
+    "@fontsource/ramaraja": "^5.2.8",
     "@tailwindcss/vite": "^4.1.17",
     "astro": "^5.15.5",
     "svelte": "^5.45.8",
diff --git a/website/src/components/Contact.astro b/website/src/components/Contact.astro
@@ -7,7 +7,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
   <div class="max-w-[130ch] mx-auto">
     <div class="flex flex-row">
       <div class="sm:w-2/5 p-6 py-12">
-        <div class="prose">
+        <div class="prose prose-headings:text-left">
           <Content />
         </div>
         <form action="message" class="mt-6">
@@ -40,7 +40,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
               placeholder="Your message"></textarea>
           </div>
           <input
-            class="px-6 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
+            class="px-6 py-2 pt-3 mt-3 font-serif bg-green-300 rounded-full text-lg cursor-pointer"
             type="submit"
             value="Submit"
             size=""
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
@@ -2,6 +2,6 @@
   <a class="underline text-lg" href=`${import.meta.env.BASE_URL}/#top`
     >Return to top</a
   >
-  <p class="text-2xl! font-semibold font-serif">Benefit Decision Toolkit</p>
+  <p class="text-2xl! font-serif">Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>
 </footer>
diff --git a/website/src/components/Hero.astro b/website/src/components/Hero.astro
@@ -14,7 +14,7 @@ import { Content } from "../assets/copy/Hero.md";
     </div>
     <a href=`${import.meta.env.BASE_URL}/#projects`>
       <p
-        class="mt-6 w-fit px-6 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-700! text-lg font-bold font-serif"
+        class="mt-6 w-fit px-6 py-2 pt-3 bg-white border-2 border-sky-500 rounded-full text-sky-700! font-serif"
       >
         See what we can do
       </p>
diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
@@ -2,6 +2,8 @@
 import "../styles/global.css";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import "@fontsource/open-sans";
+import "@fontsource/ramaraja";
 ---
 
 <html lang="en" class="scroll-smooth">
@@ -13,7 +15,7 @@ import Footer from "../components/Footer.astro";
     <title>Benefit Decision Toolkit</title>
   </head>
   <body
-    class="prose-headings:font-serif prose-headings:text-center prose-p:text-black prose-p:leading-6 prose-a:font-semibold prose-h2:text-3xl prose-h3:text-2xl prose-p:text-lg"
+    class="prose-headings:font-serif prose-headings:font-normal prose-headings:text-center prose-p:text-black prose-p:leading-6 prose-a:font-semibold prose-h2:text-4xl prose-h3:text-3xl prose-p:text-lg"
   >
     <div id="top"></div>
     <Header />
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
@@ -2,6 +2,6 @@
 @plugin "@tailwindcss/typography";
 
 @theme {
-  --font-sans: "Open Sans";
-  --font-serif: "Ramaraja";
+  --font-sans: "Open Sans", sans;
+  --font-serif: "Ramaraja", serif;
 }

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@`
`2`	`2`	<a class="underline text-lg" href=`${import.meta.env.BASE_URL}/#top`
`3`	`3`	`>Return to top</a`
`4`	`4`	`>`
`5`		`- <p class="text-2xl! font-semibold font-serif">Benefit Decision Toolkit</p>`
	`5`	`+ <p class="text-2xl! font-serif">Benefit Decision Toolkit</p>`
`6`	`6`	`<p>With ❤️ from Philly</p>`
`7`	`7`	`</footer>`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ import { Content } from "../assets/copy/Hero.md";`
`14`	`14`	`</div>`
`15`	`15`	<a href=`${import.meta.env.BASE_URL}/#projects`>
`16`	`16`	`<p`
`17`		`- class="mt-6 w-fit px-6 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-700! text-lg font-bold font-serif"`
	`17`	`+ class="mt-6 w-fit px-6 py-2 pt-3 bg-white border-2 border-sky-500 rounded-full text-sky-700! font-serif"`
`18`	`18`	`>`
`19`	`19`	`See what we can do`
`20`	`20`	`</p>`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@`
`2`	`2`	`@plugin "@tailwindcss/typography";`
`3`	`3`
`4`	`4`	`@theme {`
`5`		`- --font-sans: "Open Sans";`
`6`		`- --font-serif: "Ramaraja";`
	`5`	`+ --font-sans: "Open Sans", sans;`
	`6`	`+ --font-serif: "Ramaraja", serif;`
`7`	`7`	`}`