Merge pull request #36 from runofthemillgeek/fix/font-family-fallback

Add font-family fallback and optimize font loading

assets/css/fonts.css

@@ -3,6 +3,7 @@
     src: url('/fonts/Literata/Literata-Light.woff2') format('woff2');
     font-weight: light;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -10,6 +11,7 @@
     src: url('/fonts/Literata/Literata-LightItalic.woff2') format('woff2');
     font-weight: light;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -17,6 +19,7 @@
     src: url('/fonts/Literata/Literata-SemiBold.woff2') format('woff2');
     font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -24,6 +27,7 @@
     src: url('/fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
     font-weight: bold;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -31,6 +35,7 @@
     src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -38,4 +43,5 @@
     src: url('/fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
-}
+    font-display: swap;
+}

assets/css/main.css

@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Literata";
+  font-family: var(--font-body);
   margin: auto;
   max-width: var(--main-width);
   padding-left: var(--main-padding);
@@ -89,7 +89,7 @@ code {
   -o-font-feature-settings: "liga", "dlig";
   font-feature-settings: "liga", "dlig";
   font-variant-ligatures: contextual;
-  font-family: "Monaspace";
+  font-family: var(--font-mono);
   font-size: .9em;
   line-height: 0;
 }
@@ -129,7 +129,7 @@ hr {
 }
 
 .header p {
-  font-family: monospace;
+  font-family: var(--font-mono);
   margin-top: var(--header-menu-top-gap);
   margin-right: var(--header-menu-side-gap);
 }
@@ -156,7 +156,7 @@ footer {
 }
 
 footer a {
-  font-family: "Monaspace";
+  font-family: var(--font-mono);
   margin-left: .2rem;
   margin-right: .2rem;
 }
@@ -182,7 +182,7 @@ footer a {
 
 .line-date {
   font-size: small;
-  font-family: "Monaspace";
+  font-family: var(--font-mono);
   min-width: 120px;
   max-width: 120px;
   text-align: right;
@@ -456,7 +456,6 @@ figcaption {
 /* breadcrumbs */
 
 .breadcrumbs {
-  /* font-family: "Monaspace"; */
   font-size: .8em;
   margin-bottom: calc(-0.5 * var(--h1-margin-top));
 }
@@ -471,7 +470,7 @@ figcaption {
 
 .back-to-top {
   text-align: center;
-  font-family: "Monaspace";
+  font-family: var(--font-mono);
   font-size: small;
   margin-bottom: 2rem;
   /* margin-top: -3rem; */

assets/css/utils.css

@@ -15,5 +15,5 @@
 }
 
 .monospace {
-    font-family: "Monaspace";
-}
+    font-family: var(--font-mono);
+}

assets/css/vars.css

@@ -12,6 +12,9 @@
     --header-menu-top-gap: 1rem;
 
     /* Typography */
+    --font-body: 'Literata', Georgia, Cambria, 'Noto Serif', 'Droif Serif', ui-serif, serif;
+    --font-mono: "Monaspace", ui-monospace, monospace;
+
     --h1-margin-top: 2rem;
     --h1-margin-bottom: 1.5rem;
     --h2-margin-top: 2rem;
@@ -71,4 +74,4 @@
         --social-icons-bottom-margin: 0rem;
         --caption-padding: calc(2 * var(--main-padding));
     }
-}
+}