install font-source, remove neutral-750

Author: davidlyons

package-lock.json

@@ -15,6 +15,8 @@
     "@astrojs/mdx": "^4.1.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
+    "@fontsource-variable/inter": "^5.2.5",
+    "@fontsource/rubik": "^5.2.5",
     "@iconify-json/devicon": "^1.2.17",
     "@iconify-json/file-icons": "^1.2.1",
     "@iconify-json/skill-icons": "^1.2.0",

package.json

@@ -2,6 +2,10 @@
 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';
 
@@ -42,14 +46,6 @@ const GA_ID = import.meta.env.PUBLIC_GA_ID!;
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 
-<!-- Fonts -->
-<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@100..900&family=Rubik:wght@700&display=swap"
-  rel="stylesheet"
-/>
-
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
 

src/components/BaseHead.astro

@@ -14,11 +14,8 @@
   --breakpoint-xl: 1200px;
   --breakpoint-2xl: 1400px;
 
-  /* use https://oklch.com ? */
-  --color-neutral-750: #333;
-
   --font-display: 'Rubik', sans-serif;
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Inter Variable', sans-serif;
 
   /* 15 / 16 */
   --text-base: 0.9375rem;