feat: add fallback fonts

Author: brckd

astro.config.ts

@@ -2,9 +2,11 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import vercel from "@astrojs/vercel";
 import netlify from "@astrojs/netlify";
+import { FontaineTransform } from "fontaine";
 
 import { defineConfig } from "astro/config";
 import { loadEnv } from "vite";
+import { join, dirname } from "node:path";
 
 import markdown from "./src/lib/markdownConfig";
 import { SITE_URI } from "./src/consts";
@@ -22,4 +24,13 @@ export default defineConfig({
       : adapter === "vercel"
         ? vercel()
         : undefined,
+  vite: {
+    plugins: [
+      FontaineTransform.vite({
+        fallbacks: ["Noto Sans", "Roboto", "Arial"],
+        resolvePath: (id) =>
+          new URL(join(dirname(import.meta.url), "node_modules", id)),
+      }),
+    ],
+  },
 });

bun.lockb

@@ -44,6 +44,7 @@
     "astro": "^5.3.0",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
+    "fontaine": "^0.5.0",
     "mdast-util-to-string": "^4.0.0",
     "postcss-import": "^16.1.0",
     "postcss-load-config": "^6.0.1",

package.json

@@ -1,6 +1,5 @@
 ---
-import "@fontsource-variable/lexend";
-import "@fontsource-variable/jetbrains-mono";
+import "@styles/fonts.css";
 import "@styles/global.css";
 
 import Head from "@comps/Head.astro";

src/layouts/Layout.astro

@@ -0,0 +1,55 @@
+/* lexend-latin-ext-wght-normal */
+@font-face {
+  font-family: "Lexend Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(@fontsource-variable/lexend/files/lexend-latin-ext-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* lexend-latin-wght-normal */
+@font-face {
+  font-family: "Lexend Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(@fontsource-variable/lexend/files/lexend-latin-wght-normal.woff2)
+    format("woff2-variations");
+  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;
+}
+
+/* jetbrains-mono-latin-ext-wght-normal */
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url(@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-ext-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* jetbrains-mono-latin-wght-normal */
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url(@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2)
+    format("woff2-variations");
+  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;
+}