[Themes] Add font options (#919)

app/javascript/src/javascripts/themes.js

@@ -4,7 +4,7 @@ import LStorage from "./utility/storage";
 const Theme = {};
 
 Theme.Values = {
-  "Theme": ["Main", "Extra", "Palette", "StickyHeader", "Navbar", "Gestures", "ForumNotif"],
+  "Theme": ["Main", "Extra", "Palette", "Font", "StickyHeader", "Navbar", "Gestures", "ForumNotif"],
   "Posts": ["WikiExcerpt", "StickySearch"],
 };
 

app/javascript/src/javascripts/utility/storage.js

@@ -57,6 +57,9 @@ LStorage.Theme = {
   /** @returns {string} Colorblind-friendly palette (default / deut / trit) */
   Palette: ["theme-palette", "default"],
 
+  /** @returns {string} Font family (verdana / leto / lexend / dyslexic ) */
+  Font: ["theme-font", "Verdana"],
+
   /** @returns {string} Position of the navbar on the post page (top / bottom / both / none) */
   Navbar: ["theme-nav", "top"],
 

app/javascript/src/styles/base.scss

@@ -8,6 +8,7 @@
 @import "base/base";
 @import "base/links";
 @import "base/fontawesome";
+@import "base/fonts";
 
 @import "common/standard_variables";
 @import "common/standard_elements";

app/javascript/src/styles/base/_fonts.scss

@@ -0,0 +1,161 @@
+// Picker
+body {
+  &[data-th-font="Lato"] { font-family: "Lato", $base_font_family; }
+  &[data-th-font="Lexend"] { font-family: "Lexend", $base_font_family; }
+  &[data-th-font="Monospace"] { font-family: monospace, monospace; }
+  &[data-th-font="OpenDyslexic"] { font-family: "OpenDyslexic", $base_font_family; }
+  &[data-th-font="OpenSans"] { font-family: "OpenSans", $base_font_family; }
+  &[data-th-font="ComicSans"] { font-family: "Comic Sans MS", "Comic Sans", cursive; }
+}
+
+/** Font Definitions **/
+// Lato
+@font-face {
+  font-family: "Lato";
+  src: url("/public/fonts/Lato/Lato-Regular.woff2") format("woff2"),
+       url("/public/fonts/Lato/Lato-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("/public/fonts/Lato/Lato-Bold.woff2") format("woff2"),
+       url("/public/fonts/Lato/Lato-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("/public/fonts/Lato/Lato-Italic.woff2") format("woff2"),
+       url("/public/fonts/Lato/Lato-Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("/public/fonts/Lato/Lato-BoldItalic.woff2") format("woff2"),
+       url("/public/fonts/Lato/Lato-BoldItalic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+
+// Lexend
+@font-face {
+  font-family: "Lexend";
+  src: url("/public/fonts/Lexend/Lexend-Regular.woff2") format("woff2"),
+       url("/public/fonts/Lexend/Lexend-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lexend";
+  src: url("/public/fonts/Lexend/Lexend-Bold.woff2") format("woff2"),
+       url("/public/fonts/Lexend/Lexend-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lexend";
+  src: url("/public/fonts/Lexend/Lexend-Italic.woff2") format("woff2"),
+       url("/public/fonts/Lexend/Lexend-Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lexend";
+  src: url("/public/fonts/Lexend/Lexend-BoldItalic.woff2") format("woff2"),
+       url("/public/fonts/Lexend/Lexend-BoldItalic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+
+// OpenDyslexic
+@font-face {
+  font-family: "OpenDyslexic";
+  src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2") format("woff2"),
+       url("/public/fonts/OpenDyslexic/OpenDyslexic-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenDyslexic";
+  src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2") format("woff2"),
+       url("/public/fonts/OpenDyslexic/OpenDyslexic-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenDyslexic";
+  src: url("/public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2") format("woff2"),
+       url("/public/fonts/OpenDyslexic/OpenDyslexic-Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenDyslexic";
+  src: url("/public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff2") format("woff2"),
+       url("/public/fonts/OpenDyslexic/OpenDyslexic-BoldItalic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+
+// OpenSans
+@font-face {
+  font-family: "OpenSans";
+  src: url("/public/fonts/OpenSans/OpenSans-Regular.woff2") format("woff2"),
+       url("/public/fonts/OpenSans/OpenSans-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenSans";
+  src: url("/public/fonts/OpenSans/OpenSans-Bold.woff2") format("woff2"),
+       url("/public/fonts/OpenSans/OpenSans-Bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenSans";
+  src: url("/public/fonts/OpenSans/OpenSans-Italic.woff2") format("woff2"),
+       url("/public/fonts/OpenSans/OpenSans-Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OpenSans";
+  src: url("/public/fonts/OpenSans/OpenSans-BoldItalic.woff2") format("woff2"),
+       url("/public/fonts/OpenSans/OpenSans-BoldItalic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}

app/javascript/src/styles/base/_vars.scss

@@ -20,7 +20,7 @@ $dtext_h3_size: 1.6em;
 $dtext_h4_size: 1.4em;
 $dtext_h5_size: 1.2em;
 $dtext_h6_size: 1em;
-$base_font_family: Verdana, sans-serif;
+$base_font_family: Verdana, Geneva, sans-serif;
 
 $box-shadow-size: 2px 2px 5px;
 

app/javascript/src/styles/common/post_search.scss

@@ -13,7 +13,7 @@
     textarea {
 
       // Override default texarea styles
-      font-family: Verdana, sans-serif;
+      font-family: $base_font_family;
       font-size: 1rem;
       line-height: 1rem;
       padding: 0.5rem 0 0.5rem 0.5rem;

app/javascript/src/styles/views/posts/index/_index.scss

@@ -101,7 +101,7 @@ body.c-posts.a-index, body.c-favorites.a-index {
 
       // Match the searchbox
       padding: 0.5em;
-      font-family: Verdana, sans-serif;
+      font-family: $base_font_family;
       font-size: 1.05em;
     }
   }

app/views/layouts/_theme_include.html.erb

@@ -8,6 +8,7 @@
       "th-sheader": localStorage.getItem("theme-sheader") || false,
       "th-forumnotif": localStorage.getItem("theme-forumnotif") || false,
       "th-palette": localStorage.getItem("theme-palette") || "default",
+      "th-font": localStorage.getItem("theme-font") || "Verdana",
       "th-nav": localStorage.getItem("theme-nav") || "top",
 
       // Settings

app/views/static/theme.html.erb

@@ -45,6 +45,18 @@
       <option value="trit">Tritanopia</option>
     </select>
 
+    <label for="Theme_Font">Font</label>
+    <select id="Theme_Font">
+      <option value="Verdana">Verdana</option>
+      <option value="Lato">Lato</option>
+      <option value="Lexend">Lexend</option>
+      <option value="Monospace">Monospace</option>
+      <option value="OpenDyslexic">Open Dyslexic</option>
+      <option value="OpenSans">Open Sans</option>
+      <option value="ComicSans">Comic Sans</option>
+    </select>
+
+
   <h3>Features</h3>
     <label for="Theme_ForumNotif">Forum Activity Dot</label>
     <select id="Theme_ForumNotif">
@@ -59,6 +71,7 @@
       <option value="2">Disabled</option>
     </select>
 
+
   <h3>Navigation</h3>
     <label for="Theme_StickyHeader">Sticky Header</label>
     <select id="Theme_StickyHeader">