website: Use Fira Code and Charter fonts.

* Makefile (fonts): New variable.
(website): Depend on website/fonts.
(website/fonts): New target.
(clean): Clean up website/fonts.
* website/style.css (@font-face: Charter, @font-face: Fira Code
Regular, @font-face: Fira Code SemiBold): New font faces.
(body): Use 20px Charter font.
(pre): Use 0.9em Fira Code font.
(code, samp): Use 0.8em semi-bold Fira Code font.

1 files changed, 30 insertions, 6 deletions

diff --git a/website/style.css b/website/style.css
index 4f310ce..bcd4136 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1,22 +1,46 @@
+@font-face {
+    font-family: 'Charter';
+    src: url('/fonts/charter_regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('/fonts/FiraCode-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Code';
+    src: url('/fonts/FiraCode-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+}
+
 body {
     margin: 40px auto;
     max-width: 900px;
     line-height: 1.6;
-    font-size: 18px;
+    font-family: 'Charter';
+    font-size: 20px;
     padding: 0 10px;
 }
 
-pre, code {
-    background-color: #f0f0f0;
+pre, code, samp {
+    font-family: 'Fira Code';
 }
 
 pre {
+    background-color: #f0f0f0;
     padding: 1em;
+    font-size: 0.9em;
 }
 
-code {
-    padding-left: 0.2em;
-    padding-right: 0.2em;
+code, samp {
+    font-size: 0.8em;
+    font-weight: 600;
 }
 
 /* Make the SVG badges clickable. */