Added alternative font

Author: stevenvachon

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "website-frontend",
   "description": "My website's frontend.",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "license": "UNLICENSED",
   "author": "Steven Vachon <[email protected]> (https://svachon.com)",
   "repository": "github:stevenvachon/website-frontend",

src/layouts/main.njk

@@ -29,6 +29,8 @@
     <link rel="icon" href="/images/favicon.png" type="image/png">
     <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
     <link rel="license" href="//creativecommons.org/licenses/by-nc-nd/4.0/deed.en">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap">
     <link rel="stylesheet" href="/styles.css" media="screen">
     <script src="/scripts.js"></script>
     {% if 'blog-post' in (tags or []) %}

src/styles/blog-post.scss

@@ -23,9 +23,11 @@
 
   .-blog-post--title {
     color: var(--yellow);
+    font-family: var(--alternative-font);
     font-size: 1.5rem;
-    font-weight: bold;
-    font-variant: small-caps;
+    font-style: italic;
+    font-weight: 800;
+    text-transform: uppercase;
 
     a:any-link {
       text-decoration: underline;

src/styles/blog.scss

@@ -37,6 +37,8 @@
         var(--site-padding);
 
       .-blog--secondary-organizing-title {
+        font-family: var(--alternative-font);
+        font-weight: 800;
         margin-bottom: 2rem;
         text-transform: uppercase;
       }

src/styles/btn.scss

@@ -8,9 +8,10 @@
   box-shadow: 0 0 var(--blue-glow-size) 0 var(--blue-glow-off);
   color: var(--yellow);
   cursor: pointer;
+  font-family: var(--alternative-font);
   font-size: var(--btn-font-size);
   font-style: inherit;
-  font-weight: bold;
+  font-weight: 800;
   letter-spacing: 0.025em; // Relative size
   padding: var(--btn-padding);
   padding-right: var(--btn-padding-italic-space);

src/styles/contact.scss

@@ -127,8 +127,9 @@
       var(--overlay-shadow-offset) var(----overlay-shadow-blur);
     box-sizing: border-box;
     color: var(--yellow);
+    font-family: var(--alternative-font);
     font-size: 1.5rem;
-    font-weight: bold;
+    font-weight: 800;
     left: 50%;
     min-height: calc(
       1em + (var(--padding) * 2)

src/styles/content.scss

@@ -97,9 +97,11 @@
   h5,
   h6 {
     color: var(--yellow);
-    font-variant: small-caps;
-    font-weight: bold;
+    font-family: var(--alternative-font);
+    font-style: italic;
+    font-weight: 800;
     margin-bottom: 0.7rem;
+    text-transform: uppercase;
   }
 
   h2 {

src/styles/header.scss

@@ -24,7 +24,6 @@
       &::after {
         color: var(--medium-grey);
         content: 'Home' / '';
-        font-family: var(--body-font);
         font-size: 0.65rem;
         font-weight: normal;
         left: 100%;
@@ -81,8 +80,10 @@
   }
 
   .-header--nav-main {
+    font-family: var(--alternative-font);
     order: 1; // Display last
     position: relative; // For pseudo-element
+    text-transform: uppercase;
 
     &::before {
       background-image: linear-gradient(
@@ -99,7 +100,6 @@
       padding: var(--btn-padding);
       padding-right: var(--btn-padding-italic-space);
       text-shadow: none;
-      text-transform: uppercase;
     }
 
     ul {
@@ -125,8 +125,7 @@
 
         a:any-link {
           color: var(--yellow);
-          font-weight: bold;
-          text-transform: uppercase;
+          font-weight: 800;
 
           &:not(:active, :focus, :hover) {
             transition: color var(--link-duration-out);

src/styles/variables.scss

@@ -42,6 +42,7 @@
   --projectileColor8: #9a9a9a;
 
   // Fonts
+  --alternative-font: 'Merriweather Sans', sans-serif;
   --body-font: Helvetica, Arial, sans-serif;
 
   // Transitions