[add] cache fonts

assets/reader/fonts.css

@@ -0,0 +1,119 @@
+/**
+ * Lato
+ *   - Charsets: [latin,latin-ext]
+ *   - Styles: [100,700,100italic,regular,italic,700italic]
+ **/
+
+/* lato-100 - latin_latin-ext */
+@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: 100;
+  src: url("./fonts/lato-v24-latin_latin-ext-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-100italic - latin_latin-ext */
+@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: 100;
+  src: url("./fonts/lato-v24-latin_latin-ext-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-regular - latin_latin-ext */
+@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_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-italic - latin_latin-ext */
+@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_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-700 - latin_latin-ext */
+@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_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* lato-700italic - latin_latin-ext */
+@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_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/**
+ * Open Sans
+ *   - Charsets: [latin,latin-ext]
+ *   - Styles: [700,regular,italic,700italic]
+ **/
+
+/* open-sans-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("./fonts/open-sans-v36-latin_latin-ext-regular.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-italic - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("./fonts/open-sans-v36-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-700 - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: url("./fonts/open-sans-v36-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-700italic - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Open Sans";
+  font-style: italic;
+  font-weight: 700;
+  src: url("./fonts/open-sans-v36-latin_latin-ext-700italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/**
+ * Arbutus Slab
+ *   - Charsets: [latin,latin-ext]
+ *   - Styles: [regular]
+ **/
+
+/* arbutus-slab-regular - latin_latin-ext */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Arbutus Slab";
+  font-style: normal;
+  font-weight: 400;
+  src: url("./fonts/arbutus-slab-v16-latin_latin-ext-regular.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

assets/reader/index.js

@@ -1,5 +1,5 @@
 const THEMES = ["light", "tan", "blue", "gray", "black"];
-const THEME_FILE = "/assets/reader/readerThemes.css";
+const THEME_FILE = "/assets/reader/themes.css";
 
 /**
  * Initial load handler. Gets called on DOMContentLoaded. Responsible for
@@ -267,20 +267,13 @@ class EBookReader {
         // Restore Theme
         this.setTheme();
 
-        // Set Fonts - TODO: Local
-        //   https://gwfh.mranftl.com/fonts
+        // Set Fonts
         this.rendition.getContents().forEach((c) => {
-          [
-            "https://fonts.googleapis.com/css?family=Arbutus+Slab",
-            "https://fonts.googleapis.com/css?family=Open+Sans",
-            "https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i",
-          ].forEach((url) => {
-            let el = c.document.head.appendChild(
-              c.document.createElement("link")
-            );
-            el.setAttribute("rel", "stylesheet");
-            el.setAttribute("href", url);
-          });
+          let el = c.document.head.appendChild(
+            c.document.createElement("link")
+          );
+          el.setAttribute("rel", "stylesheet");
+          el.setAttribute("href", "/assets/reader/fonts.css");
         });
       }.bind(this)
     );

assets/sw.js

@@ -38,6 +38,7 @@ const ROUTES = [
   { route: "/local", type: CACHE_UPDATE_ASYNC },
   { route: "/reader", type: CACHE_UPDATE_ASYNC },
   { route: "/manifest.json", type: CACHE_UPDATE_ASYNC },
+  { route: /^\/assets\/reader\/fonts\//, type: CACHE_ONLY },
   { route: /^\/assets\//, type: CACHE_UPDATE_ASYNC },
   {
     route: /^\/documents\/[a-zA-Z0-9]{32}\/(cover|file)$/,
@@ -63,9 +64,10 @@ const PRECACHE_ASSETS = [
   "/reader",
   "/assets/local/index.js",
   "/assets/reader/index.js",
+  "/assets/reader/fonts.css",
+  "/assets/reader/themes.css",
   "/assets/icons/icon512.png",
   "/assets/images/no-cover.jpg",
-  "/assets/reader/readerThemes.css",
 
   // Main App Assets
   "/manifest.json",
@@ -78,6 +80,19 @@ const PRECACHE_ASSETS = [
   "/assets/lib/epub.min.js",
   "/assets/lib/no-sleep.min.js",
   "/assets/lib/idb-keyval.min.js",
+
+  // Fonts
+  "/assets/reader/fonts/arbutus-slab-v16-latin_latin-ext-regular.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-100.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-100italic.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-700.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-700italic.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-italic.woff2",
+  "/assets/reader/fonts/lato-v24-latin_latin-ext-regular.woff2",
+  "/assets/reader/fonts/open-sans-v36-latin_latin-ext-700.woff2",
+  "/assets/reader/fonts/open-sans-v36-latin_latin-ext-700italic.woff2",
+  "/assets/reader/fonts/open-sans-v36-latin_latin-ext-italic.woff2",
+  "/assets/reader/fonts/open-sans-v36-latin_latin-ext-regular.woff2",
 ];
 
 // ------------------------------------------------------- //