(style) updated fonts, using Public Sans, Fira Code, and Syne

Author: akollegger

astro.config.mjs

@@ -67,7 +67,9 @@ export default defineConfig({
       }
     ],
     customCss: [
-      // Path to your Tailwind base styles:
+      '@fontsource/syne/700.css',
+      '@fontsource/public-sans',
+      '@fontsource/fira-code',
       './src/tailwind.css',
     ],
 

package-lock.json

@@ -16,6 +16,9 @@
     "@astrojs/starlight-tailwind": "^3.0.0",
     "@astrojs/tailwind": "^5.1.4",
     "@effect/platform-node": "^0.70.0",
+    "@fontsource/fira-code": "^5.2.5",
+    "@fontsource/public-sans": "^5.2.5",
+    "@fontsource/syne": "^5.2.5",
     "astro": "^5.1.7",
     "date-fns": "^4.1.0",
     "effect": "^3.12.5",

package.json

@@ -4,4 +4,9 @@
 
 .sl-markdown-content img {
   background: white;
+}
+
+.site-title {
+  font-family: 'Syne', 'Arial Narrow Bold', sans-serif;
+  font-weight: 800;
 }

src/tailwind.css

@@ -1,7 +1,9 @@
-/** @type {import('tailwindcss').Config} */
 
+/** @type {import('tailwindcss').Config} */
 import starlightPlugin from '@astrojs/starlight-tailwind';
 
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 // custom color theme
 const accent = { 200: '#8FE3E8', 600: '#0A6190', 900: '#014063', 950: '#002B43' };
 const gray = { 100: '#f3f7f9', 200: '#e7eff2', 300: '#bac4c8', 400: '#7b8f96', 500: '#495c62', 700: '#2a3b41', 800: '#182a2f', 900: '#121a1c' };
@@ -15,10 +17,8 @@ export default {
         accent, gray,
       },
       fontFamily: {
-        // Your preferred text font. Starlight uses a system font stack by default.
-        sans: ['"Atkinson Hyperlegible"'],
-        // Your preferred code font. Starlight uses system monospace fonts by default.
-        mono: ['"IBM Plex Mono"'],
+        sans: ['"Public Sans"', ...defaultTheme.fontFamily.sans],
+        mono: ['"Fira Code"', ...defaultTheme.fontFamily.mono],
       },
     },
   },