Replace google fonts with fonts hosted on the server

README.org

@@ -14,6 +14,8 @@ On the server my =secret/= folder is protected using =.htpasswd=. In the current
 
 Requisites: =rclone= (just for uploading files to the server), Python 3.
 
+I am now storing fonts locally instead of loading them from Google, so the fonts (Hubballi, Merriweather, Noto Color Emoji) have to be downloaded and put in the =/fonts/= directory (see [[https://gwfh.mranftl.com/fonts][google-webfonts-helper]]).
+
 ** My use case
 
 - most of my current fandoms are numbered parts of a bigger franchise

build/archive.css

@@ -1,5 +1,56 @@
 @charset "UTF-8";
 
+/* hubballi-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: 'Hubballi';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/hubballi-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* merriweather-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: 'Merriweather';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/merriweather-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* merriweather-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: 'Merriweather';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/merriweather-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* merriweather-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: 'Merriweather';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/merriweather-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* merriweather-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: 'Merriweather';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/merriweather-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* noto-color-emoji-regular - emoji */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Color Emoji';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/noto-color-emoji-v30-emoji-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 html {
   height: 100%;
 }

build/fic4.css

@@ -1,3 +1,45 @@
+/* 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+ */
+}
+
+/* inconsolata-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: 'Inconsolata';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/inconsolata-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 /* ----- COLOURS ----- */
 
 body, details > summary::marker {

build/tufte.css

@@ -1,8 +1,41 @@
 @charset "UTF-8";
 
+/* eb-garamond-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: 'EB Garamond';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/eb-garamond-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* eb-garamond-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: 'EB Garamond';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/eb-garamond-v27-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* eb-garamond-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: 'EB Garamond';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/eb-garamond-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* eb-garamond-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: 'EB Garamond';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/eb-garamond-v27-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 /* Tufte CSS styles */
 html {
-    font-size: 15px;
+  font-size: 15px;
 }
 
 body {

headerfooter.py

@@ -5,7 +5,7 @@ def headerwrite(output,title,headerone,desc,main=False,local=False):
         header.write("/home/mdd/Documents/drive/proj/fic-archive/build/")
     else:
         header.write("/fic/")
-    header.write("archive.css\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Hubballi&family=Lato:wght@400;700&family=Merriweather:wght@400;700&family=Noto+Color+Emoji&display=swap\" rel=\"stylesheet\">\n<link rel=\"me\" href=\"https://ple.praze.net/users/tre\">\n<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Tré's fic archive\" href=\"https://tre.praze.net/fic/feed.xml\">\n<meta name=\"theme-color\" content=\"#edc4c4\" />\n<title>" + title + "</title>\n<noscript>\n<style>.jsonly{display:none;}</style>\n</noscript>\n</head>\n<body>\n<div id=\"content\">\n<div id=\"inside\">\n<noscript>\n<div id=\"warning\">\n<p><b>Warning:</b> this part of my site is <b>18+</b>. Fics contain NSFW material and mature themes (death, suicide, mental illness, incest …). Browse at your own risk.</p>\n</div>\n</noscript>\n<h1>" + headerone + "</h1>\n" + desc + "\n")
+    header.write("archive.css\">\n<link rel=\"me\" href=\"https://ple.praze.net/users/tre\">\n<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Tré's fic archive\" href=\"https://tre.praze.net/fic/feed.xml\">\n<meta name=\"theme-color\" content=\"#edc4c4\" />\n<title>" + title + "</title>\n<noscript>\n<style>.jsonly{display:none;}</style>\n</noscript>\n</head>\n<body>\n<div id=\"content\">\n<div id=\"inside\">\n<noscript>\n<div id=\"warning\">\n<p><b>Warning:</b> this part of my site is <b>18+</b>. Fics contain NSFW material and mature themes (death, suicide, mental illness, incest …). Browse at your own risk.</p>\n</div>\n</noscript>\n<h1>" + headerone + "</h1>\n" + desc + "\n")
     if not main:
         header.write("<p>\n<a href=\"")
         if local: