font styles and load speed

site/_includes/-inline-css.njk

@@ -0,0 +1 @@
+{% include "css/mainfonts.css" %}

site/_includes/base.njk

@@ -9,7 +9,7 @@ title: Joshua's Homepage
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <link rel="stylesheet" href="{{ "/site.css" | url }}"/>
-    <link rel="preload" as="font" href="/fonts/inter/InterVariable.woff2"/>
+    <style>{% include "-inline-css.njk" %}</style>
     <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
     <script defer src="/scripts/effects.js"></script>
     <link rel="prefetch" href="/fonts/inter/InterVariable-Italic.woff2"/>

site/_includes/css/inter.css

@@ -1,14 +0,0 @@
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
-}
-@font-face {
-  font-family: Inter;
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
-}

site/_includes/css/mainfonts.css

@@ -0,0 +1,17 @@
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/inter-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;
+}/* inter-latin-wght-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/inter-latin-wght-italic.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;
+}

site/_includes/css/site.css

@@ -52,8 +52,8 @@ body {
   padding: 0;
   margin: 0;
   font-family:
-    Inter, Ubuntu, "Noto Sans", "Fira Sans", Roboto, "Helvetica Neue",
+    "Inter", "Inter Variable", Ubuntu, "Noto Sans", "Fira Sans", Roboto,
-    "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+    "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
   background-color: var(--c-body-background);
   color: var(--c-text-dark);
   background-image:
@@ -157,7 +157,7 @@ main p img {
   max-width: 100%;
 }
 
-section:nth-child(n+2) {
+section:nth-child(n + 2) {
   margin-top: 1rem;
 }
 
@@ -173,8 +173,8 @@ header.toc {
   li {
     display: inline;
     list-style: none;
-    &:nth-child(n+2):before {
+    &:nth-child(n + 2):before {
-      content: ' · ';
+      content: " · ";
     }
   }
 }
@@ -271,7 +271,8 @@ span.aside {
   }
 }
 
-ul, ol {
+ul,
+ol {
   padding-left: 1.5rem;
 }
 
@@ -478,7 +479,7 @@ h4 {
   font-weight: 700;
   text-shadow: 0 0 0.5em var(--c-highlight);
   margin-top: 0;
-  main > &:nth-child(n+2) {
+  main > &:nth-child(n + 2) {
     margin-top: 1.5rem;
   }
   margin-bottom: 0.5rem;

site/css.njk

@@ -1,7 +1,6 @@
 ---
 permalink: /site.css
 ---
-{%include "css/inter.css"%}
 {%include "css/site.css"%}
 {%include "css/prism.css"%}
 {%include "css/ftaurebesh.css"%}