feat: add self-hosted Alegreya, Plantin, and Redaction font families and move Google Fonts links

app/app.vue

@@ -2,7 +2,23 @@
 import '~/assets/css/main.css';
 
 useHead({
-    link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+    link: [
+        { rel: 'icon', type: 'image/png', href: '/favicon.png' },
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        {
+            rel: 'preconnect',
+            href: 'https://fonts.gstatic.com',
+            crossorigin: '',
+        },
+        {
+            rel: 'stylesheet',
+            href: 'https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap',
+        },
+        {
+            rel: 'stylesheet',
+            href: 'https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap',
+        },
+    ],
 });
 </script>
 

app/assets/css/fonts.css

@@ -0,0 +1,239 @@
+@font-face {
+    font-family: 'SohneBuch';
+    src:
+        url('~/assets/fonts/Sohne/Sohne-Buch.woff') format('woff'),
+        url('~/assets/fonts/Sohne/Sohne-Buch.ttf') format('truetype');
+    font-display: swap;
+}
+
+/* Plantin MT Pro */
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRg.TTF')
+        format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProRgIt.TTF')
+        format('truetype');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProBold.TTF')
+        format('truetype');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProBoldIt.TTF')
+        format('truetype');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProLight.TTF')
+        format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Plantin MT Pro';
+    src: url('~/assets/fonts/Plantin MT Pro/PlantinMTProLightIt.TTF')
+        format('truetype');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction */
+@font-face {
+    font-family: 'Redaction';
+    src: url('~/assets/fonts/Redaction/Redaction-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction';
+    src: url('~/assets/fonts/Redaction/Redaction-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction';
+    src: url('~/assets/fonts/Redaction/Redaction-Italic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 10 */
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 10';
+    src: url('~/assets/fonts/Redaction/Redaction_10-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 20 */
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 20';
+    src: url('~/assets/fonts/Redaction/Redaction_20-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 35 */
+@font-face {
+    font-family: 'Redaction 35';
+    src: url('~/assets/fonts/Redaction/Redaction_35-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 35';
+    src: url('~/assets/fonts/Redaction/Redaction_35-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 35';
+    src: url('~/assets/fonts/Redaction/Redaction_35-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 50 */
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 50';
+    src: url('~/assets/fonts/Redaction/Redaction_50-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 70 */
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 70';
+    src: url('~/assets/fonts/Redaction/Redaction_70-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+/* Redaction 100 */
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Regular.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Bold.woff2')
+        format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Redaction 100';
+    src: url('~/assets/fonts/Redaction/Redaction_100-Italic.woff2')
+        format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
+

app/assets/css/main.css

@@ -1,15 +1,14 @@
-
-@font-face {
-    font-family: 'SohneBuch';
-    src:
-        url('~/assets/fonts/Sohne/Sohne-Buch.woff') format('woff'),
-        url('~/assets/fonts/Sohne/Sohne-Buch.ttf') format('truetype');
-}
+@import './fonts.css';
 
 :root {
     /* --font: 'Baskervville', serif; */
-    --font: 'EB Garamond', serif;
+    /* --font: 'EB Garamond', serif; */
+    /* --font: 'Plantin MT Pro', serif; */
+    --font: 'Redaction', serif;
+    /* --font: 'Young Serif', serif; */
     /* --font: "SohneBuch", sans-serif; */
+    --font-hover: 'Redaction 70', serif;
+    /* --font-hover: var(--font); */
     --text: #333;
     --muted: #666;
     --bg: #fbfbf7;
@@ -73,7 +72,6 @@ body {
     mix-blend-mode: screen;
 }
 
-
 .punch-link:hover {
     background-size: 100% 100%;
     background-image: linear-gradient(#fff, #fff);

app/pages/index.vue

@@ -23,22 +23,6 @@ rotateTitle();
 
 useHead({
     title: pageTitle,
-    link: [
-        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-        {
-            rel: 'preconnect',
-            href: 'https://fonts.gstatic.com',
-            crossorigin: '',
-        },
-        {
-            rel: 'stylesheet',
-            href: 'https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap',
-        },
-        {
-            rel: 'stylesheet',
-            href: 'https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap',
-        },
-    ],
 });
 
 definePageMeta({
@@ -69,8 +53,7 @@ definePageMeta({
                 >
                     <h3 class="project__title">Unicord</h3>
                     <p class="project__description">
-                        Discord bot SDK inspired by webserver
-                        architecture.
+                        Discord bot SDK inspired by webserver architecture.
                     </p>
                 </a>
                 <a
@@ -80,8 +63,8 @@ definePageMeta({
                 >
                     <h3 class="project__title">Rune Buddy</h3>
                     <p class="project__description">
-                        League of Legends runepage manager. Save &
-                        organise your pages for free.
+                        League of Legends runepage manager. Save & organise your
+                        pages for free.
                     </p>
                 </a>
             </div>
@@ -90,12 +73,11 @@ definePageMeta({
             <h5>About</h5>
             <div class="section__content">
                 <p>
-                    I work across the full stack; backend, frontend, and
-                    the product decisions in between. My favorite side
-                    projects are ones that bring me new skills. Even
-                    better are ones where I solve a problem or build a
-                    tool I can use. I'm always open to interesting work
-                    and conversations.
+                    I work across the full stack; backend, frontend, and the
+                    product decisions in between. My favorite side projects are
+                    ones that bring me new skills. Even better are ones where I
+                    solve a problem or build a tool I can use. I'm always open
+                    to interesting work and conversations.
                 </p>
             </div>
         </section>
@@ -164,6 +146,7 @@ section:last-of-type {
     text-decoration: underline;
     text-underline-offset: 4px;
     font-style: italic;
+    font-family: var(--font-hover);
 }
 
 .project__title {