Adjust fonts

package.json

@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.10",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.2",
+    "@astrojs/mdx": "^3.1.7",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^5.1.1",
     "@types/node": "^22.3.0",
-    "astro": "^4.11.5",
+    "astro": "^4.15.11",
     "tailwindcss": "^3.4.5",
     "typescript": "^5.5.3"
   },

public/blog.css

@@ -1,5 +1,5 @@
 :not(pre)>code {
-    font-family: "Iosevka Fixed Web", Iosevka, monospace;
+    font-family: var(--font-mono);
     border: solid 1px var(--c-border-2);
     padding: 0 0.25rem;
     border-radius: 0.25rem;
@@ -33,7 +33,7 @@ pre.astro-code>code .line::before {
 
 #blog h2 {
     font-size: 1.5rem;
-    font-family: "Iosevka Etoile Web", serif;
+    font-family: var(--font-display);
     font-weight: 900;
     margin-top: 3rem;
     margin-bottom: 1.5rem;
@@ -41,7 +41,7 @@ pre.astro-code>code .line::before {
 
 #blog h3 {
     font-size: 1.25rem;
-    font-family: "Iosevka Etoile Web", serif;
+    font-family: var(--font-display);
     font-weight: 900;
     margin-top: 2.25rem;
     margin-bottom: 1.5rem;

public/global.css

@@ -8,24 +8,6 @@
     src: url("/Iosevka/Regular.woff2") format("woff2");
 }
 
-@font-face {
-    font-family: 'Iosevka Fixed Web';
-    font-display: swap;
-    font-weight: 700;
-    font-stretch: normal;
-    font-style: normal;
-    src: url('/Iosevka/Bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Iosevka Etoile Web';
-    font-display: swap;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
-}
-
 /* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka  */
 @font-face {
     font-family: "Iosevka Iaso";
@@ -43,6 +25,10 @@
     --c-bg-2: #18181b;
     --c-border-1: transparent;
     --c-border-2: #606060;
+
+    --font-display: "Atkinson Hyperlegible", sans-serif;
+    --font-body: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
+    --font-mono: "Iosevka Fixed Web", Iosevka, sans-serif;
 }
 
 @media (prefers-color-scheme: light) {
@@ -62,6 +48,6 @@ html {
 }
 
 body {
-    font-family: "Iosevka Iaso", "Iosevka Fixed Web", sans-serif;
+    font-family: var(--font-body);
     font-optical-sizing: auto;
 }

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/BlogLayout.astro

@@ -15,12 +15,10 @@ lang = lang ?? "en";
         <link rel="stylesheet" href="/global.css" />
         <link rel="stylesheet" href="/blog.css" />
         <title>Blog - Fernando Araoz</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link
+        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+
-            rel="stylesheet"
-        />
         <link
             rel="stylesheet"
             type="text/css"

src/layouts/SideProject.astro

@@ -22,12 +22,9 @@ const images_str = JSON.stringify(images);
         <link rel="stylesheet" href="/global.css" />
         <link rel="stylesheet" href="/blog.css" />
         <title>Side projects - Fernando Araoz</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link
+        <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
-            rel="stylesheet"
-        />
         <link
             rel="stylesheet"
             type="text/css"

src/pages/index.astro

@@ -14,6 +14,10 @@ import NavigationLayout from "../layouts/NavigationLayout.astro";
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <link rel="stylesheet" href="/global.css" />
+        <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=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
         <title>Fernando Araoz</title>
         <link
             rel="stylesheet"

tailwind.config.mjs

@@ -9,8 +9,8 @@ export default {
                 'c-bg-2': 'var(--c-bg-2)',
             },
             fontFamily: {
-                "etoile": ["'Iosevka Etoile Web'", "serif"],
+                "etoile": ["var(--font-display)"],
-                "display": ["'Outfit'", "sans-serif"],
+                "display": ["var(--font-display)"],
             }
         },
     },