Use Astro’s experimental API for font loading (#29)

Author: delucis

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, fontProviders } from 'astro/config';
 import db from '@astrojs/db';
 import preact from '@astrojs/preact';
 import sitemap from '@astrojs/sitemap';
@@ -31,7 +31,19 @@ export default defineConfig({
     inlineStylesheets: 'always'
   },
   experimental: {
-    clientPrerender: true
+    clientPrerender: true,
+    fonts: [
+      {
+        provider: fontProviders.google({
+          experimental: { variableAxis: { Inter: { opsz: ['14..32'] } } }
+        }),
+        name: 'Inter',
+        cssVariable: '--astro-font-inter',
+        weights: ['300 900'],
+        styles: ['normal'],
+        subsets: ['latin']
+      }
+    ]
   },
   image: {
     remotePatterns: [

public/fonts/InterVariable.woff2

@@ -1,4 +1,5 @@
 ---
+import { Font } from 'astro:assets';
 import { ClientRouter } from 'astro:transitions';
 import { Schema } from 'astro-seo-schema';
 
@@ -93,13 +94,7 @@ const description = Astro.props.description ?? starpodConfig.description;
 
     <link rel="preload" as="image" href={show.image} />
 
-    <link
-      crossorigin
-      rel="preload"
-      href="/fonts/InterVariable.woff2"
-      as="font"
-      type="font/woff2"
-    />
+    <Font cssVariable="--astro-font-inter" preload />
 
     <Schema
       slot="head"

src/layouts/Layout.astro

@@ -1,4 +1,3 @@
-@import './fonts.css';
 @import './tailwind.css';
 @import './gradient-icon.css';
 @import './buttons.css';

src/styles/fonts.css

@@ -36,7 +36,7 @@
   --color-light-text-body: oklch(59.68% 0.017 285.89);
   --color-light-text-heading: oklch(30.55% 0.052 292.57);
 
-  --font-inter: Inter, sans-serif;
+  --font-inter: var(--astro-font-inter);
 }
 
 /*