Fantasque Sans Mono -> Cairo as body font

Author: avivace

package.json

@@ -38,6 +38,7 @@
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "typeface-cairo": "0.0.61",
     "typeface-chakra-petch": "0.0.61",
     "url-loader": "^1.1.2",
     "webpack": "^4.26.0",

src/index.js

@@ -1,6 +1,6 @@
 console.log('Here we are')
 import 'bulma'
 import './stylus/main.styl'
-import './fonts/fantasque/FantasqueSansMono-Regular-decl.css'
 import 'typeface-chakra-petch'
-import 'typeface-cabin'
+import 'typeface-cabin'
+import 'typeface-cairo'

src/stylus/main.styl

@@ -9,7 +9,7 @@ body
 /* Sticky footer: https://codepen.io/chriscoyier/pen/RRbKrL */
 
 .footer
-  font: 14px Fantasque Sans Mono;
+  font: 14px/1.5 Cairo;
   line-height: 12px;
   padding: 1rem 1rem 1rem;
   right: 0;
@@ -43,7 +43,7 @@ body
   white-space:nowrap;
 
 .introtext
-  font: 20px/1.1 Fantasque Sans Mono, arial, sans-serif;
+  font: 20px/1.1 Cairo, arial, sans-serif;
   text-align: justify;
   text-justify: inter-word
 
@@ -72,15 +72,15 @@ body
     padding: 25px;
 
 .subtitle
-  font: 32px/1 Chakra Petch, arial, sans-serif;
+  font: 32px/1.3 Chakra Petch, arial, sans-serif;
   text-align: center;
 
 .projectTitle
-  font: 26px/1 Fantasque Sans Mono, arial, sans-serif;
+  font: 26px/1 Cairo, arial, sans-serif;
   font-weight: bold;
 
 .projects
-  font: 20px/1 Fantasque Sans Mono, arial, sans-serif;
+  font: 20px/1.3 Cairo, arial, sans-serif;
   text-align: justify;
   text-justify: inter-word