chore: use astro's native font loading

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

data/licenses-cargo.json

@@ -1,7 +1,7 @@
 import path from "node:path";
 import react from "@astrojs/react";
 import type { AstroIntegration } from "astro";
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import license from "rollup-plugin-license";
 
 const dirname = path.dirname(new URL(import.meta.url).pathname);
@@ -38,6 +38,16 @@ function setPrerender(): AstroIntegration {
 
 // https://astro.build/config
 export default defineConfig({
+	fonts: [
+		{
+			provider: fontProviders.fontsource(),
+			name: "Stack Sans Headline",
+			cssVariable: "--font-stack-sans-headline",
+			weights: ["200 700"],
+			styles: ["normal"],
+			subsets: ["latin", "latin-ext"],
+		},
+	],
 	vite: {
 		server: { proxy },
 		preview: { proxy },

data/licenses-npm.json

@@ -14,7 +14,6 @@
 		"@base-ui/react": "^1.5.0",
 		"@explodingcamera/css": "^0.0.4",
 		"@floating-ui/react": "^0.27.19",
-		"@fontsource-variable/stack-sans-headline": "^5.2.1",
 		"@icons-pack/react-simple-icons": "^13.13.0",
 		"@picocss/pico": "^2.1.1",
 		"@tanstack/react-query": "^5.101.0",

web/astro.config.ts

@@ -18,7 +18,7 @@
   --pico-form-element-spacing-horizontal: 0.6rem;
 
   --pico-font-family:
-    "Stack Sans Headline Variable", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
+    var(--font-stack-sans-headline), system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
     "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
   --pico-font-family-sans-serif: var(--pico-font-family);
   font-variant-numeric: tabular-nums;

web/bun.lock

@@ -1,7 +1,7 @@
 ---
-import "@fontsource-variable/stack-sans-headline";
 import "../global.css";
 
+import { Font } from "astro:assets";
 import { ClientRouter } from "astro:transitions";
 
 import ThemeSwitcher from "../components/ThemeSwitcher.astro";
@@ -17,6 +17,7 @@ type Props = { title: string; hideFooter?: boolean; noSwitcher?: boolean };
     <meta name="robots" content="noindex" />
     <meta name="description" content="Liwan Web Analytics Dashboard" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <Font cssVariable="--font-stack-sans-headline" />
     <ClientRouter />
     <title>{Astro.props.title} | Liwan</title>
   </head>