switch to the Charter font

This was copied from the upstream .zip file as available here:

https://practicaltypography.com/charter.html

With the following command:

     find charter/ -name '*webfont*' -type f -name '*.eot' -o -name '*.woff' | xargs cp -t ~/src/ikiwiki-bootstrap-anarcat/fonts

Charter is fairly small: all the files committed here sum up to around
352K, and individual WOFF files are around 32KB, less than the
Javascript loaded in this site. And those are only loaded once,
possibly not at all if the font is already defined

See also https://anarc.at/blog/2020-03-10-font-changes

bootstrap.local.css

@@ -53,8 +53,9 @@ code {
 }
 
 /* limit main content to ~90 chars per line */
+/* update: practical typography recommends 2-3 alphabets */
 #content {
-  max-width: 45em;
+  max-width: 35em;              /* this is 2.5 alphabets with Charter */
 }
 
 /* limit header as well otherwise logo is out of whack without sidebar */
@@ -62,19 +63,98 @@ code {
   max-width: 55em;
 }
 
-/* try Fira Font, fallback on bootstrap fonts */
-body {
-    /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
+/* Charter Font */
+
+/* This snippet was taken from Butterick's site but modified to add a
+   fonts/ prefix to follow local layout */
+
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 10, 2013 */
+@font-face {
+    font-family: 'charterbold_italic';
+    src: url('fonts/charter_bold_italic-webfont.eot');
+    src: url('fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/charter_bold_italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'charterbold';
+    src: url('fonts/charter_bold-webfont.eot');
+    src: url('fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/charter_bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'charteritalic';
+    src: url('fonts/charter_italic-webfont.eot');
+    src: url('fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/charter_italic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'charterregular';
+    src: url('fonts/charter_regular-webfont.eot');
+    src: url('fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/charter_regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* some hacking at typefaces to get some fresh zest in here
+ * fallbacks from:
+ * https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
+ * https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
+ */
+.navbar, .footer {
+    /*
+     * Avenir: Mac, quite different but should still be pretty
+     * Gill sans: Mac, Windows, somewhat similar to Avenir (indulge me)
+     * Noto sans: Android, packaged in Debian
+     * Open sans: Texlive extras AKA Linux, packaged in Debian
+     * Fira sans: Mozilla's Firefox OS
+     * Liberation sans: Linux fallback
+     * Helvetica: general fallback
+     * Sans-serif: fallback
+     */
+    font-family: Avenir, "Gill sans", "Noto sans", "Open sans", "Fira sans", "Liberation sans", Helvetica, sans-serif;
+    /* Fira is available from https://github.com/mozilla/Fira/ under the SIL Open Font License */
+    /* alternatively, just use system fonts for "controls" instead:
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    /* -apple-system, BlinkMacSystemFont = San Fran on Mac
-     * Segoe UI = Windows
-     * Roboto = Android, Chrome OS
-     * Oxygen, Ubuntu, Cantarell = KDE, Ubuntu, Gnome
-     * Fira Sans = Firefox OS
-     * Droid Sans = Older Android
-     * Helvetica Neue = Old mac
+    gitlab uses: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+    */
+}
+h1, h2, h3, h4, h5, body {
+    /* 
+     * Charter: Butterick's favorite, freely available, found on https://practicaltypography.com/free-fonts.html
+     * Palatino: Mac OS
+     * Palatino Linotype: Windows
+     * Noto serif: Android, packaged in Debian
+     * Liberation serif: Linux fallback
+     * Serif: fallback
      */
+    font-family: Charter, Palatino, "Palatino Linotype", "Noto serif", "Liberation serif", serif;
+    /* Charter is available from https://practicaltypography.com/charter.html under the liberal Bitstream license */
+}
+h1, h2, h3, h4, h5 {
+    font-style: italic;
 }
+/* for charter, we should inline this: */
+/*  <link rel="stylesheet" href="https://paste.anarc.at/publish/charter/stylesheet.css" type="text/css" charset="utf-8" /> */
+/* we won't ship fira because it is too big and will hope some other font will kick in for headings, preferably Open sans */
+
+/* enlarge body point size for charter for larger displays */
+@media (min-device-width: 750px) {
+    body {
+        font-size: 20px;
+        line-height: 1.3; /* default in FF is ~1.48, try seems a bit to sparse */
+    }
+}
+
 pre, code {
     font-family: "Fira Mono", Menlo, Monaco, Consolas, "Courier New", "Liberation mono", monospace;
 }