Replace google fonts with fonts hosted on the server

README.org

@@ -6,6 +6,8 @@
 - =rclone= (for syncing to the server)
 * Tracking games with a backloggery clone
 ** Setup
+*** Fonts
+Upload the fonts Lato, Titillium Web, and Material Icons to the directory =/fonts= on your server (I recommend [[https://gwfh.mranftl.com/fonts][google-webfonts-helper]]). Check the filenames are consistent with those in =build/backloggery.css=. Alternatively, you can load the fonts remotely and adjust the page head HTML generated by =skeleton.py=.
 *** Setting the variables
 Rename =variables-template.py= to =variables.py= and edit:
 - =endlessgames=: a list of “endless” games in the format =title (console)=

build/backloggery.css

@@ -1,3 +1,78 @@
+/* lato-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/lato-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/lato-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/lato-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* lato-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Lato';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/lato-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* titillium-web-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* titillium-web-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/titillium-web-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* titillium-web-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/titillium-web-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* titillium-web-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Titillium Web';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/titillium-web-v17-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* material-icons-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/material-icons-v142-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,input,li,main,nav,ol,p,section,select,span,summary,table,textarea,ul {
   border:0;
   -webkit-box-sizing:border-box;

skeleton.py

@@ -14,7 +14,7 @@ def headerwrite(output,section,local=False):
     hexstring = ""
     for element in rgb:
         hexstring += str(hex(int(element * 255)))[2:]
-    header.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--active-base: hsl(" + str(variables.hue) + ", 45%, 30%); --active-secondary: hsl(" + str(variables.hue) + ", 15%, 30%); --active-accent: hsl(" + str(variables.hue) + ", 90%, 70%);\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <meta name=\"theme-color\" content=\"#" + hexstring + "\">\n    <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n    <link href=\"https://fonts.googleapis.com/css?family=Lato|Teko|Titillium+Web\" rel=\"stylesheet\">\n    <title>Static backlog</title>\n    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"Static backlog\" href=\"" + variables.serverpath + "feed.xml\">\n    <link href=\"")
+    header.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--active-base: hsl(" + str(variables.hue) + ", 45%, 30%); --active-secondary: hsl(" + str(variables.hue) + ", 15%, 30%); --active-accent: hsl(" + str(variables.hue) + ", 90%, 70%);\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <meta name=\"theme-color\" content=\"#" + hexstring + "\">\n    <title>Static backlog</title>\n    <link rel=\"alternate\" type=\"application/rss+xml\" title=\"Static backlog\" href=\"" + variables.serverpath + "feed.xml\">\n    <link href=\"")
     if local:
         header.write(variables.localpath + "build/")
     else: