switch to self-hosted Iosevka fonts, enable prefetch

Assisted by Claude Code

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

astro.config.mjs

@@ -8,6 +8,7 @@ export default defineConfig({
   site: "https://avinal.space",
   output: "static",
   integrations: [sitemap()],
+  prefetch: true,
   markdown: {
     shikiConfig: {
       theme: "github-dark-default",

package-lock.json

@@ -11,6 +11,8 @@
       "dependencies": {
         "@astrojs/rss": "^4.0.15",
         "@astrojs/sitemap": "^3.7.0",
+        "@fontsource/iosevka": "^5.2.5",
+        "@fontsource/iosevka-aile": "^5.2.5",
         "astro": "^5.17.3",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-slug": "^6.0.0",
@@ -593,6 +595,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource/iosevka": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/iosevka/-/iosevka-5.2.5.tgz",
+      "integrity": "sha512-Zv/UHJodDug1LcnWv2u2+GPp3oWP3U6Xp16cJOsqqZQNsCu8sA/ttT331N0NypxBZ+7c8szlSRlYDcy9liZ8pw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/iosevka-aile": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/iosevka-aile/-/iosevka-aile-5.2.5.tgz",
+      "integrity": "sha512-K9EwsSxfWPWjvrYM+NkgHaImpHgaVgC67l6uWf6W+4taeca6LKMJn/U11mQiRwLlecoI0PP2Q9o/8iIPaLOSgg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",

package.json

@@ -23,6 +23,8 @@
   "dependencies": {
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
+    "@fontsource/iosevka": "^5.2.5",
+    "@fontsource/iosevka-aile": "^5.2.5",
     "astro": "^5.17.3",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",

src/config/theme.ts

@@ -107,8 +107,8 @@ const theme: ThemeConfig = {
   },
 
   fonts: {
-    sans: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
+    sans: '"Iosevka Aile", system-ui, sans-serif',
-    mono: '"JetBrains Mono", "Fira Code", ui-monospace, monospace',
+    mono: '"Iosevka", ui-monospace, monospace',
   },
 
   colors: {

src/layouts/BaseLayout.astro

@@ -3,6 +3,13 @@ import Nav from "@/components/Nav.astro";
 import Footer from "@/components/Footer.astro";
 import theme, { generateThemeCSS } from "@/config/theme";
 import "@/styles/global.css";
+import "@fontsource/iosevka-aile/400.css";
+import "@fontsource/iosevka-aile/500.css";
+import "@fontsource/iosevka-aile/600.css";
+import "@fontsource/iosevka-aile/700.css";
+import "@fontsource/iosevka-aile/800.css";
+import "@fontsource/iosevka/400.css";
+import "@fontsource/iosevka/500.css";
 
 interface Props {
   title: string;
@@ -56,10 +63,6 @@ const resolvedOgImage = ogImage || new URL("/og-default.svg", Astro.site).href;
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="alternate" type="application/rss+xml" title="Avinal Kumar" href="/rss.xml" />
 
-    <!-- Font preloads -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 
     <!-- Design tokens generated from theme config -->
     <style set:html={themeCSS} />