Added fonts and sizes

cps/static/css/epub_themes.css

@@ -1,19 +1,83 @@
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url("fonts/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("OpenSans"), local("Open Sans"), local("OpenSans-Regular"),
+    url("fonts/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Montserrat"), local("Montserrat-Regular"),
+    url("fonts/Montserrat-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Poppins"), local("Poppins-Regular"),
+    url("fonts/Poppins-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Oswald";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Oswald"), local("Oswald-Regular"),
+    url("fonts/Oswald-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NotoSans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("NotoSans"), local("Noto Sans"), local("NotoSans-Regular"),
+    url("fonts/NotoSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Lato"), local("Lato-Regular"),
+    url("fonts/Lato-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "RobotoSlab";
+  font-style: normal;
+  font-weight: 400;
+  src: local("RobotoSlab"), local("Roboto Slab"), local("RobotoSlab-Regular"),
+    url("fonts/RobotoSlab-Regular.ttf") format("truetype");
+}
+
 .lightTheme {
-	background: #fff;
-	color: #000;
+  background: #fff;
+  color: #000;
 }
 
 .darkTheme {
-	background: #202124;
-	color: #fff
+  background: #202124;
+  color: #fff;
 }
 
 .sepiaTheme {
-	background: #ece1ca;
-	color: #000;
+  background: #ece1ca;
+  color: #000;
 }
 
 .blackTheme {
-	background: #000;
-	color: #fff
-}
+  background: #000;
+  color: #fff;
+}

cps/static/css/reader.css

@@ -27,6 +27,11 @@ input[type="checkbox"] {
     margin-right: 10px;
 }
 
+select {
+    margin-top: 10px;
+    min-width: 50%;
+}
+
 .slider input[type="range"] {
   display: block;
   width: 80%;

cps/static/js/reading/epub.js

@@ -85,4 +85,9 @@ let reader;
     // default settings load
     const theme = localStorage.getItem("calibre.reader.theme") ?? "lightTheme";
     selectTheme(theme);
+    const font = localStorage.getItem("calibre.reader.font") ?? "Roboto";
+    selectFont(font);
+
+    // enabling script content
+    // reader.rendition.settings.allowScriptedContent = true;
 })();

cps/templates/read.html

@@ -13,7 +13,6 @@
     {% endif %}
     <link rel="apple-touch-icon" sizes="140x140" href="{{ url_for('static', filename='favicon.ico') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-
     <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
@@ -98,10 +97,19 @@
             <div class="form-group fontSizeWrapper">
                 <label for="fader">{{ _('Font Sizes') }}</label>
                 <div class="slider">
-                    <input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
+                    <input type="range" min="50" max="200" value="100" id="fontSizeFader" step="25">
                     <span id="fontSizeValue">1</span>
                 </div>
             </div>
+            {% set fonts = ["Roboto","OpenSans","Montserrat","Poppins","Oswald","NotoSans","Lato","RobotoSlab"] %}
+            <div class="form-group">
+                <label for="fontFamily">{{ _('Font Family') }}</label>
+                <select name="fontFamily" id="fontFamilyValue">
+                    {% for font in fonts %}
+                        <option value="{{ font }}">{{ _(font) }}</option>
+                    {% endfor %}
+                </select>
+            </div>
             <div class="closer icon-cancel-circled"></div>
         </div>
     </div>
@@ -160,6 +168,14 @@
             document.getElementById("main").style.backgroundColor = themes[id]["bgColor"];
         }
 
+        function selectFont (id) {
+            // Saving font to local storage
+            localStorage.setItem("calibre.reader.font", id);
+            
+            // Apply font to epubjs iframe
+            reader.rendition.themes.font(id);
+        }
+
         // font size settings logic
         const fontSizeFader = document.getElementById('fontSizeFader'),
             fontSizeValue = document.getElementById('fontSizeValue');
@@ -167,6 +183,12 @@
             reader.rendition.themes.fontSize(`${this.value}%`);
             fontSizeValue.innerText = `${this.value / 100}`;
         });
+
+        // font family settings logic
+        const fontFamilyValue = document.getElementById('fontFamilyValue');
+        fontFamilyValue.addEventListener("change", function () {
+            selectFont(this.value);
+        });
     </script>
     <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>