feat: Use "Roboto Slab" & "Fira Sans" fonts

Fixes:

* Include correct font style sheet link i.e. a single link containing
  all fonts selected in google fonts website.

Refactor:

* Remove unused/extra fonts declarations.
* Update font styles to use weights available with the included fonts.
* Reduce font size larger by 0.1 to keep it at 18px.

Author: manid2

assets/styles/_buttons.scss

@@ -6,7 +6,7 @@ button,
   border: $spacer-1 solid;
   cursor: pointer;
   display: flex;
-  font-weight: bold;
+  font-weight: $font-bold;
   padding: $spacer-small $spacer-normal;
   text-align: center;
 
@@ -32,7 +32,7 @@ button,
   /* button variants */
   &.outline,
   &.transparent {
-    font-weight: normal;
+    font-weight: $font-normal;
     background: none;
 
     @include themed {

assets/styles/_gen_syntax.scss

@@ -19,7 +19,7 @@
 }
 
 .chroma .gs {
-  font-weight: bold;
+  font-weight: $font-bold;
 }
 
 /* Syntax highlighting colors */

assets/styles/_header.scss

@@ -54,7 +54,7 @@
   justify-content: space-between;
 
   &__first {
-    font-weight: 700;
+    font-weight: $font-bold;
     display: block;
   }
 

assets/styles/_main.scss

@@ -11,7 +11,8 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: $font-family;
+  font-family: $font-family-normal;
+  font-weight: $font-normal;
   font-size: $font-size;
   line-height: 1.54;
   letter-spacing: -0.02em;
@@ -95,7 +96,7 @@ h4,
 h5,
 h6 {
   font-family: $font-family-title;
-  font-weight: bold;
+  font-weight: $font-bold;
   margin: $spacer-large2 0 $spacer-normal 0;
   width: fit-content;
 
@@ -283,7 +284,7 @@ td {
 }
 
 th {
-  font-weight: bold;
+  font-weight: $font-bold;
 
   @include themed {
     color: t($text-brighter);

assets/styles/_post.scss

@@ -90,6 +90,7 @@
 
   &-description {
     font-size: $font-size-larger;
+    font-weight: $font-light;
 
     @include themed {
       color: t($text-brighter);

assets/styles/_variables.scss

@@ -1,11 +1,17 @@
 /* Fonts */
-$font-family: arial, helvetica, verdana, roboto, sans-serif;
-$font-family-mono: ubuntu mono, monaco, consolas, monospace;
-$font-family-title: "Times New Roman", garamond, georgia, "Roboto Serif",
-  serif;
+$font-family-title: "Roboto Slab", "Times New Roman", garamond, serif;
+$font-family-normal: "Fira Sans", arial, helvetica, sans-serif;
+$font-family-mono: "Ubuntu Mono", monaco, consolas, monospace;
+
+/* Font weights */
+$font-light: 300;
+$font-normal: 400;
+$font-bold: 500;
+
+/* Font sizes */
 $font-size: 1rem;
 $font-size-smaller: $font-size - 0.125;
-$font-size-larger: $font-size + 0.225;
+$font-size-larger: $font-size + 0.125;
 
 /* Layouts */
 $container-max-width: 864px;

layouts/partials/head/base.html

@@ -79,9 +79,10 @@
 {{- /* Fonts */}}
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@500&family=Roboto:wght@300&display=swap" />
-<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Roboto+Slab:wght@300;400;500&family=Ubuntu+Mono:ital@0;1&display=swap"
+  rel="stylesheet"
+/>
 
 {{- /* RSS Feed */}}
 <link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ site.Title }}" />