chore: font loading strategy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_includes/base.liquid

@@ -31,7 +31,7 @@
       type="image/svg+xml">
     <link href="/assets/icons/apple-touch-icon.png?v={% appVersion %}" rel="apple-touch-icon">
     {% capture css %}
-      {% render "../assets/styles/fonts/silka.css" %}
+      {% render "../assets/styles/fonts/index.css" %}
       {% render "../assets/styles/partials/vars.css" %}
       {% render "../assets/styles/partials/animations.css" %}
       {% render "../assets/styles/index.css" %}

src/assets/styles/fonts/index.css

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'silka';
+  src: url('/assets/fonts/silka/black.woff2') format('woff2'),;
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'silka';
+  src: url('/assets/fonts/silka/bold.woff2') format('woff2'),;
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'silka';
+  src: url('/assets/fonts/silka/regular.woff2') format('woff2'),;
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'serif-fallback';
+  src: local('Helvetica Neue');
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 1px;
+}

src/assets/styles/partials/vars.css

@@ -52,7 +52,7 @@
   --webrings: #ec8fd0;
 
   /* fonts */
-  --font-sans: silka, Inter, Roboto, 'Helvetica Neue', system-ui, sans-serif;
+  --font-sans: silka, 'serif-fallback', system-ui, sans-serif;
   --font-mono: ui-monospace, monospace;
 
   /* text */