Add Fira Code as monospaced font, misc typography improvements (#415)

Author: avivace

custom/style.css

@@ -1,96 +1,86 @@
-/* Import Inter font */
-@import url('https://rsms.me/inter/inter.css');
+/* Import Fira Code font */
+@import "/fonts/fira_code.css"; /* Import Inter font */
+@import url("https://rsms.me/inter/inter.css");
 
 html {
-    font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 @supports (font-variation-settings: normal) {
-    html {
-        font-family: 'Inter var', sans-serif;
-    }
+  html {
+    font-family: "Inter var", sans-serif;
+  }
 }
 
-/* Import Fira Code font */
-@import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);
-
 @supports (font-variation-settings: normal) {
-    code {
-        font-family: 'Fira Code VF', monospace;
-    }
+  code {
+    font-family: "Fira Code", monospace;
+  }
 }
 
 body {
-    font-family: "Inter";
-    /* Enable some font features for Inter (https://rsms.me/inter/#features/calt) */
-    font-feature-settings: "ss01",
-        /* Alternate (Open) digits */
-        "ss02",
-        /* Disambiguation gliphs */
-        "case";
-    /* Case alternates */
-    letter-spacing: -0.005em;
-    /* equals -0.5% */
+  font-family: "Inter";
+  /* Enable some font features for Inter (https://rsms.me/inter/#features/calt) */
+  font-feature-settings: "ss01", /* Alternate (Open) digits */ "ss02",
+    /* Disambiguation gliphs */ "case";
+  /* Case alternates */
+  letter-spacing: -0.005em;
+  /* equals -0.5% */
 }
 
 button {
-    font-family: inherit;
+  font-family: inherit;
 }
 
 table {
-    font-feature-settings: "tnum",
-        /* Tabular numbers */
-        "ss01",
-        /* Alternate (Open) digits */
-        "ss02",
-        /* Disambiguation gliphs */
-        "case";
-    		/* Case alternates */
+  font-feature-settings: "tnum", /* Tabular numbers */ "ss01",
+    /* Alternate (Open) digits */ "ss02", /* Disambiguation gliphs */ "case";
+  /* Case alternates */
 }
 
 code {
-    /* "!important" needed because https://github.com/rust-lang/mdBook/issues/1552 */
-    font-family: 'Fira Code', monospace !important;
-    font-size: 0.85em;
+  /* "!important" needed because https://github.com/rust-lang/mdBook/issues/1552 */
+  font-family: "Fira Code", monospace !important;
+  font-size: 0.85em;
+  font-weight: 500;
 }
 
-
 .header {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .menu-title {
-    font-weight: 400;
-    font-size: 2.75rem;
-    letter-spacing: -0.02em;
-    /* equals -2% */
+  font-weight: 400;
+  font-size: 2.75rem;
+  letter-spacing: -0.02em;
+  /* equals -2% */
 }
 
 .box {
-    margin: 20px 0;
-    padding: 1.6px 20px;
-    border-left-width: .75rem;
-    border-left-style: solid;
+  margin: 20px 0;
+  padding: 1.6px 20px;
+  border-left-width: 0.75rem;
+  border-left-style: solid;
 }
 
-.box>.box-title {
-    font-weight: 600;
-    text-transform: uppercase;
+.box > .box-title {
+  font-weight: 600;
+  text-transform: uppercase;
 }
 
 .box.tip {
-    border-color: #42b983;
-    background-color: var(--quote-bg);
+  border-color: #42b983;
+  background-color: var(--quote-bg);
 }
 
 .box.warning {
-    border-left-color: var(--c-warning);
-    background-color: rgba(255, 229, 100, .2);
-    color: var(--c-warning-text);
+  border-left-color: var(--c-warning);
+  background-color: rgba(255, 229, 100, 0.2);
+  color: var(--c-warning-text);
 }
 
-.box.warning>.box-title{
-    color: var(--c-warning-title);
+.box.warning > .box-title {
+  color: var(--c-warning-title);
 }
 
 .box.danger {
@@ -104,12 +94,11 @@ code {
 }
 
 .spacer {
-    width: 100%;
-    height: 3px;
-    margin: 25px 0px 25px 0px;
+  width: 100%;
+  height: 3px;
+  margin: 25px 0px 25px 0px;
 }
 
-
 /* Global CSS variables */
 
 :root {
@@ -140,7 +129,7 @@ code {
 }
 
 .light {
-    --c-warning-text: #746000;
+  --c-warning-text: #746000;
 }
 
 .navy {
@@ -150,5 +139,5 @@ code {
 }
 
 .rust {
-    --c-warning-text: #ad8e00;
+  --c-warning-text: #ad8e00;
 }

src/fonts/fira_code.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Light.woff2') format('woff2'),
+    url("woff/FiraCode-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
+    url("woff/FiraCode-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
+    url("woff/FiraCode-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-SemiBold.woff2') format('woff2'),
+    url("woff/FiraCode-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
+    url("woff/FiraCode-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira Code VF';
+  src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
+       url('woff/FiraCode-VF.woff') format('woff-variations');
+  /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+  font-weight: 300 700;
+  font-style: normal;
+}