[themes/*] Turn to Fira fonts for the website.

themes/doublefourteen/assets/sass/fonts.sass

@@ -0,0 +1,59 @@
+// Fira Mono
+
+@font-face
+  font-family: 'Fira Mono'
+  src: local("Fira Mono"), url("fonts/FiraMono-Regular.woff2") format("woff2"), url("fonts/FiraMono-Regular.woff") format("woff")
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: local("Fira Mono Bold"), url("fonts/FiraMono-Bold.woff2") format("woff2"), url("fonts/FiraMono-Bold.woff") format("woff")
+  font-weight: 600
+  font-style: normal
+
+
+// Fira Sans
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Light"), url("fonts/FiraSans-Light.woff2") format("woff2"), url("fonts/FiraSans-Light.woff") format("woff")
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Light Italic"), url("fonts/FiraSans-LightItalic.woff2") format("woff2"), url("fonts/FiraSans-LightItalic.woff") format("woff")
+  font-weight: 300
+  font-style: italic
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Regular"), url("fonts/FiraSans-Regular.woff2") format("woff2"), url("fonts/FiraSans-Regular.woff") format("woff")
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Medium"), url("fonts/FiraSans-Medium.woff2") format("woff2"), url("fonts/FiraSans-Medium.woff") format("woff")
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Medium Italic"), url("fonts/FiraSans-MediumItalic.woff2") format("woff2"), url("fonts/FiraSans-MediumItalic.woff") format("woff")
+  font-weight: 500
+  font-style: italic
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Bold"), url("fonts/FiraSans-Bold.woff2") format("woff2"), url("fonts/FiraSans-Bold.woff") format("woff")
+  font-weight: 600
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Sans'
+  src: local("Fira Sans Bold Italic"), url("fonts/FiraSans-BoldItalic.woff2") format("woff2"), url("fonts/FiraSans-BoldItalic.woff") format("woff")
+  font-weight: 600
+  font-style: italic
+

themes/doublefourteen/assets/sass/style.sass

@@ -1,4 +1,5 @@
 @import "variables"
+@import "fonts"
 
 // Some convenience class to manage resolution specific elements
 @media only screen and (max-width:600px)
@@ -54,14 +55,19 @@ h1.page-title:first-letter
 
 body
   margin: 0
-  font-family: var(--body-font)
-  font-size: $body-font-size
-  line-height: $body-line-height
+  font-family: var(--sans-font)
+  font-size: $sans-font-size
+  line-height: $sans-line-height
   color: var(--foreground-color)
   background-color: var(--background-color)
   -webkit-text-size-adjust: 100%
       -ms-text-size-adjust: 100%
 
+code, .goat text
+  font-family: var(--mono-font)
+  font-size: $mono-font-size
+  line-height: $mono-line-height
+
 a
   color: var(--link-color)
 
@@ -186,7 +192,7 @@ thead th
   padding: 7px 12px
   display: block
   margin: 10px 0
-  font-size: $body-font-size
+  font-size: $sans-font-size
   font-weight: 700
   text-decoration: none !important
   a

themes/doublefourteen/assets/sass/variables.sass

@@ -15,12 +15,14 @@ $large-spacer: $spacer * 1.5
 $huge-spacer: $spacer * 3
 
 // Fonts
-$body-line-height: 1.5
+$sans-line-height: 1.5
+$mono-line-height: 1
 
 $huge-font-size: 3em
 $large-font-size: 2em
-$bigger-font-size: 1em
-$body-font-size: 20px
+$bigger-font-size: 1.2em
+$sans-font-size: 1em
+$mono-font-size: 1em
 
 // Consistent border radius
 $border-radius: 0.25rem
@@ -88,7 +90,8 @@ $title-text-color-dark: #ddd
   --foreground-color: #{$foreground-color}
 
 
-  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+  --sans-font: 'Fira Sans', 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
+  --mono-font: 'Fira Mono', Menlo, 'Lucida Console', Consolas, monaco, monospace
 
   --text-color: #{$text-color}
   --title-text-color: #{$title-text-color}
@@ -104,8 +107,6 @@ $title-text-color-dark: #ddd
   --heading-color: #{$gray-900}
   --border-color: #{$gray-300}
 
-  // --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
-
 @media (prefers-color-scheme:dark)
   \:root
     --background-color: #{$background-color-dark}