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.

2 files changed, 38 insertions, 8 deletions

diff --git a/Makefile b/Makefile
index 24a7beb..114f510 100644
--- a/Makefile
+++ b/Makefile
@@ -42,6 +42,7 @@ doc_info = $(doc_sources:.skb=.info)
 doc_html = $(doc_sources:.skb=.html)
 doc_data = doc/hello.c.gz doc/hello.tar doc/hello.txt \
            doc/spell-check-text.txt doc/dictionary
+fonts = $(addprefix $(GUIX_ENVIRONMENT)/share/fonts/web/, charter_regular.woff2 FiraCode-Regular.woff2 FiraCode-SemiBold.woff2)
 distribute_files = $(sources) $(scripts) $(tests) $(test_data) \
                    $(doc_sources) doc/skribilo.scm $(doc_data) $(DOC_SCM) $(DOC_OTHER) \
                    pre-inst-env guix.scm Makefile configure configure.scm \
@@ -152,7 +153,7 @@ distcheck: $(dist_archive)
 
 # Build website
 
-website: website/index.html website/manual/dev/en
+website: website/index.html website/manual/dev/en website/fonts
 
 website/index.html: README.org build-aux/build-home-page.el
 	$(EMACS) -Q --batch --load build-aux/build-home-page.el --funcall build-website
@@ -162,10 +163,15 @@ website/manual/dev/en: $(doc_html)
 	mkdir -p $(dir $@)
 	cp -vr $^ $@
 
+website/fonts: $(fonts)
+	rm -rf $@
+	mkdir -p $@
+	cp -v $^ $@/
+
 # Clean
 
 clean:
 	rm -f $(objects) $(dist_archive) $(dist_archive).asc Makefile.include website/index.html \
               $(DOC_SCM:.scm=.cwl) $(DOC_IMAGES) $(DOC_IMAGES:.png=.dot) $(DOC_OUT) \
 	      $(doc_info) doc/skribilo.go
-	rm -rf $(doc_html) website/manual
+	rm -rf $(doc_html) website/manual website/fonts
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. */