feat: font updates

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "7.10.7",
+  "version": "7.10.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "7.10.7",
+      "version": "7.10.10",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "7.10.10",
+  "version": "7.11.10",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/base.liquid

@@ -8,7 +8,10 @@
     <title>{{ pageTitle }}</title>
     <script defer data-domain="coryd.dev" src="/js/script.js"></script>
     <script>window.plausible = window.plausible || function() {(window.plausible.q = window.plausible.q || []).push(arguments)}</script>
+    <link rel="preload" href="/assets/fonts/Poppins-Bold.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/assets/fonts/Poppins-Regular.woff2" as="font" type="font/woff2" crossorigin>
     {% capture css %}
+      {% render "../assets/styles/partials/fonts.css" %}
       {% render "../assets/styles/partials/vars.css" %}
       {% render "../assets/styles/partials/animations.css" %}
       {% render "../assets/styles/index.css" %}

src/assets/styles/components/pagefind.css

@@ -34,7 +34,7 @@
   color: var(--accent-color);
   font-size: var(--font-size-2xl);
   line-height: var(--line-height-2xl);
-  font-weight: var(--font-weight-heavy);
+  font-weight: var(--font-weight-bold);
   margin: 0;
   transition-property: color;
   transition-timing-function: var(--transition-ease-in-out);
@@ -111,5 +111,5 @@
 
 .pagefind__placeholder {
   height: 42px !important;
-  font-weight: var(--font-weight-heavy);
+  font-weight: var(--font-weight-bold);
 }

src/assets/styles/index.css

@@ -90,7 +90,7 @@ a:active,
 
 /* headers */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: var(--font-weight-heavy);
+  font-weight: var(--font-weight-bold);
 }
 
 h1 { font-size: var(--font-size-3xl) }

src/assets/styles/partials/fonts.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: Poppins;
+  src: url('/assets/fonts/Poppins-Bold.woff2') format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Poppins;
+  src: url('/assets/fonts/Poppins-Regular.woff2') format("woff2");
+  font-weight: 400;
+  font-display: swap;
+}

src/assets/styles/partials/vars.css

@@ -56,7 +56,7 @@
   --sun: #ffa700;
 
   /* fonts */
-  --font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
 
   /* text */
@@ -83,7 +83,6 @@
 
   --font-weight-base: 400;
   --font-weight-bold: 700;
-  --font-weight-heavy: 900;
 
   /* spacing */
   --sizing-xs: .25rem;