fix: fonts

Author: zlataovce

astro.config.ts

@@ -1,7 +1,7 @@
 import starlight from "@astrojs/starlight";
 import svelte from "@astrojs/svelte";
 import d2 from "astro-d2";
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import starlightLinksValidator from "starlight-links-validator";
 import starlightSidebarTopics from "starlight-sidebar-topics";
 import codeConstantsPlugin from "./src/utils/remark/code_const";
@@ -76,10 +76,6 @@ export default defineConfig({
         baseUrl: "https://github.com/PaperMC/docs/edit/main/",
       },
       customCss: [
-        "@fontsource/poppins/400.css",
-        // "@fontsource/poppins/600.css", // see src/styles/custom.css
-        "@fontsource/jetbrains-mono/400.css",
-        "@fontsource/jetbrains-mono/600.css",
         "./src/styles/custom.css",
       ],
       components: {
@@ -541,6 +537,24 @@ export default defineConfig({
     layout: "constrained",
     domains: ["assets.papermc.io"],
   },
+  experimental: {
+    fonts: [
+      {
+        name: "Poppins",
+        cssVariable: "--sl-font",
+        weights: ["400", "500"],
+        subsets: ["latin", "latin-ext"],
+        provider: fontProviders.fontsource(),
+      },
+      {
+        name: "JetBrains Mono",
+        cssVariable: "--sl-font-mono",
+        weights: ["400", "600"],
+        subsets: ["latin", "latin-ext"],
+        provider: fontProviders.fontsource(),
+      }
+    ]
+  },
   markdown: {
     remarkPlugins: [
       [

package.json

@@ -18,8 +18,6 @@
     "@astrojs/svelte": "^7.2.0",
     "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@expressive-code/plugin-line-numbers": "^0.41.3",
-    "@fontsource/jetbrains-mono": "^5.2.8",
-    "@fontsource/poppins": "^5.2.7",
     "astro": "^5.14.7",
     "astro-d2": "^0.8.1",
     "sharp": "^0.34.4",

pnpm-lock.yaml

@@ -1,9 +1,6 @@
 ---
 import config from "virtual:starlight/user-config";
-import poppins400Woff2 from "@fontsource/poppins/files/poppins-latin-400-normal.woff2?url";
-import poppins500Woff2 from "@fontsource/poppins/files/poppins-latin-500-normal.woff2?url";
-import jetbrainsMono400Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2?url";
-import jetbrainsMono600Woff2 from "@fontsource/jetbrains-mono/files/jetbrains-mono-latin-600-normal.woff2?url";
+import { Font } from "astro:assets";
 
 const { entry, lang, siteTitle } = Astro.locals.starlightRoute;
 const { data } = entry;
@@ -59,9 +56,7 @@ const base = stripTrailingSlash(import.meta.env.BASE_URL);
 <meta property="og:image" content="https://assets.papermc.io/brand/papermc_logo.512.png" />
 <meta name="twitter:image" content="https://assets.papermc.io/brand/papermc_logo.512.png" />
 
-<link rel="preload" as="font" type="font/woff2" href={poppins400Woff2} crossorigin="anonymous" />
-<link rel="preload" as="font" type="font/woff2" href={poppins500Woff2} crossorigin="anonymous" />
-<link rel="preload" as="font" type="font/woff2" href={jetbrainsMono400Woff2} crossorigin="anonymous" />
-<link rel="preload" as="font" type="font/woff2" href={jetbrainsMono600Woff2} crossorigin="anonymous" />
+<Font cssVariable="--sl-font" preload={[{ subset: 'latin' }]} />
+<Font cssVariable="--sl-font-mono" preload={[{ subset: 'latin' }]} />
 
 <script is:inline defer src="https://trk.papermc.io/api/init" data-website-id="f93a0860-1253-4868-b27a-08208a36cea7"></script>

src/components/overrides/Head.astro

@@ -1,22 +1,3 @@
-/* poppins-latin-500-normal - defined as 600, because actual 600 is too bold */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 600;
-  src:
-    url(@fontsource/poppins/files/poppins-latin-500-normal.woff2) format("woff2"),
-    url(@fontsource/poppins/files/poppins-latin-500-normal.woff) format("woff");
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-:root {
-  --sl-font: Poppins;
-  --sl-font-mono: "JetBrains Mono";
-}
-
 /* make images in markup wide and centered */
 .sl-markdown-content img:not(:where(.not-content *)) {
   margin: 0 auto;