feat: add custom font

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, fontProviders } from 'astro/config';
 
 import node from '@astrojs/node';
 import sitemap from '@astrojs/sitemap';
@@ -55,6 +55,12 @@ export default defineConfig({
     }),
   ],
 
+  fonts: [{
+    provider: fontProviders.fontsource(),
+    name: "Geologica",
+    cssVariable: "--font-base",
+  }],
+
   markdown: {
     syntaxHighlight: false,
   },

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import { Font } from "astro:assets";
+
 import { readSingleton } from '@directus/sdk';
 
 import BaseHead from '@components/BaseHead.astro';
@@ -38,6 +40,8 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       structuredData={structuredData}
     />
 
+    <Font cssVariable="--font-base" />
+
     <!-- Set Theme -->
     <script is:inline>
       const theme = (() => {

src/styles/global.css

@@ -61,6 +61,9 @@
 
   --radius-markdown-img: 0.5rem;
 
+  /* Font */
+  --font-sans: var(--font-base);
+
   /* Reveal Animations */
   --animate-reveal: reveal 0.8s ease forwards;
   --animate-reveal-fade: reveal-fade 1.8s ease forwards;