astro 6 fonts api

Author: davidlyons

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig, fontProviders } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import icon from 'astro-icon';
@@ -12,6 +12,22 @@ export default defineConfig({
   vite: { plugins: [tailwindcss()] },
   integrations: [mdx(), sitemap(), icon()],
   compressHTML: false,
+  fonts: [
+    {
+      provider: fontProviders.fontsource(),
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      weights: ['100 900'],
+      styles: ['normal'],
+    },
+    {
+      provider: fontProviders.fontsource(),
+      name: 'Rubik',
+      cssVariable: '--font-rubik',
+      weights: [700],
+      styles: ['normal'],
+    },
+  ],
   markdown: {
     shikiConfig: {
       theme: 'one-dark-pro', // https://shiki.style/themes

package.json

@@ -16,8 +16,6 @@
     "@astrojs/mdx": "^5.0.0",
     "@astrojs/rss": "^4.0.17",
     "@astrojs/sitemap": "^3.7.1",
-    "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource/rubik": "^5.2.8",
     "@iconify-json/devicon": "^1.2.60",
     "@iconify-json/skill-icons": "^1.2.4",
     "@iconify-json/vscode-icons": "^1.2.45",

pnpm-lock.yaml

@@ -1,11 +1,8 @@
 ---
+import { Font } from 'astro:assets';
 import { ClientRouter } from 'astro:transitions';
 import { SITE_TITLE } from '@/consts';
 
-// https://docs.astro.build/en/guides/fonts/#using-fontsource
-import '@fontsource-variable/inter';
-import '@fontsource/rubik/700.css';
-
 // Import the global.css file here so that it is included on all pages through the use of the <BaseHead /> component.
 import '../styles/base.css';
 
@@ -22,6 +19,10 @@ const { title, description, image = '/site-thumb.png' } = Astro.props;
 const GA_ID = import.meta.env.PUBLIC_GA_ID!;
 ---
 
+<!-- https://docs.astro.build/en/guides/fonts/#using-fontsource -->
+<Font cssVariable="--font-inter" preload />
+<Font cssVariable="--font-rubik" preload />
+
 <!-- Google tag (gtag.js) -->
 <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}></script>
 <script is:inline define:vars={{ GA_ID }}>

src/components/BaseHead.astro

@@ -8,16 +8,18 @@
 @custom-variant prose-inline-code (&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *)));
 
 @theme {
-  --font-display: 'Rubik', sans-serif;
-  --font-sans: 'Inter Variable', sans-serif;
-
   /* 15 / 16 */
   --text-base: 0.9375rem;
   --text-base--line-height: 1.7;
 
   --aspect-retro: 4 / 3;
 }
 
+@theme inline {
+  --font-display: var(--font-rubik);
+  --font-sans: var(--font-inter);
+}
+
 @utility container {
   margin-inline: auto;
   padding-inline: 1rem;