[feature] add theme font controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/css/base.css

@@ -12,13 +12,12 @@ body {
   color: rgb(var(--theme-style-text));
   font-size: 1rem;
   line-height: 1.6;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  /* transition: background-color var(--layout-timing-extra-fast); */
 }
 
 html.is-background-color-by-theme,

src/css/button.css

@@ -8,7 +8,7 @@ input[type="submit"] {
   margin: 0 0 1em 0;
   color: rgb(var(--button-text));
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   min-height: 2.5em;
   line-height: 1;
   border: 0;
@@ -151,6 +151,10 @@ button [class*=" icon-"],
   width: 100%;
 }
 
+.button-slim {
+  padding: 0;
+}
+
 button [class^="button-"],
 button [class*=" button-"],
 .button [class^="button-"],

src/css/clock.css

@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   font-size: 1em;
-  font-family: var(--font-fjalla);
+  font-family: var(--font-display);
   color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;

src/css/date.css

@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   font-size: 1em;
-  font-family: var(--font-fjalla);
+  font-family: var(--font-display);
   color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;

src/css/form.css

@@ -32,7 +32,7 @@ select {
   margin: 0 0 1em 0;
   color: rgb(var(--form-label));
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   line-height: 2;
   min-height: 2.5em;
   min-width: 0;
@@ -94,7 +94,7 @@ textarea {
   color: rgb(var(--form-input-text));
   font-size: 1em;
   line-height: 1.6;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   height: 10em;
   min-height: 2.5em;
   min-width: 0;
@@ -172,7 +172,7 @@ input[type="text"] {
   margin: 0 0 1em 0;
   color: rgb(var(--form-input-text));
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   line-height: 1.6em;
   height: 2.5em;
   min-width: 0;
@@ -329,7 +329,7 @@ input[type="radio"]+label {
   padding: 0;
   margin: 0;
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -600,7 +600,7 @@ input[type="range"] {
   margin: 0;
   color: rgb(var(--theme-style-text));
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   display: block;
   height: 2.5em;
   width: 100%;
@@ -857,7 +857,7 @@ input[type="range"]:disabled::-moz-range-progress {
   margin: 0;
   color: rgb(var(--button-text));
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   min-height: 2.5em;
   line-height: 1;
   border: 0;
@@ -1444,7 +1444,7 @@ input[type="range"]:disabled::-moz-range-progress {
   color: rgb(var(--form-input-text));
   min-width: 4em;
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   display: flex;
   align-items: center;
   justify-content: center;

src/css/greeting.css

@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   font-size: 1em;
-  font-family: var(--font-fjalla);
+  font-family: var(--font-display);
   color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;

src/css/group.css

@@ -81,7 +81,6 @@
 }
 
 .group-name-text {
-  font-family: var(--font-fjalla);
   margin-bottom: 0;
   overflow: hidden;
   text-overflow: ellipsis;

src/css/link.css

@@ -123,6 +123,7 @@
   flex-direction: column;
   z-index: 3;
   overflow: hidden;
+  text-decoration: none;
   user-select: none;
   transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
@@ -563,8 +564,7 @@
 }
 
 .link-display-letter {
-  padding-top: 8%;
+  font-family: var(--font-display);
-  font-family: var(--font-fjalla);
   color: rgb(var(--theme-accent));
   line-height: 1;
   white-space: nowrap;
@@ -602,7 +602,7 @@
 .link-display-name {
   margin: 0;
   font-size: var(--link-item-display-name-size);
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   color: rgb(var(--theme-color-12));
   display: none;
   transition: color var(--layout-timing-extra-fast);
@@ -873,7 +873,7 @@
 .link-url-text {
   margin: 0;
   font-size: 0.7em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/css/modal.css

@@ -50,10 +50,6 @@
   position: relative;
 }
 
-.modal-heading {
-  overflow-x: hidden;
-}
-
 .modal-heading:focus {
   outline: none;
 }

src/css/tip.css

@@ -50,7 +50,7 @@
   border-radius: calc(var(--theme-radius) * 2);
   color: rgb(var(--theme-color-18));
   font-size: 0.8em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
   text-align: center;
   position: relative;
   display: block;

src/css/transitional.css

@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   font-size: 1em;
-  font-family: var(--font-fjalla);
+  font-family: var(--font-display);
   color: rgb(var(--theme-color-14));
   width: 100%;
   min-height: 2.5em;

src/css/typography.css

@@ -12,32 +12,34 @@ h6 {
 
 h1 {
   font-size: 1.5em;
-  font-family: var(--font-fjalla);
+  font-family: var(--font-display);
 }
 
 h2 {
   font-size: 1.2em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
 }
 
 h3 {
   font-size: 1.1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
 }
 
 h4 {
   font-size: 1em;
-  font-family: var(--font-regular);
+  font-family: var(--font-ui);
 }
 
 h5 {
   font-size: 1em;
-  font-family: var(--font-bold);
+  font-family: var(--font-ui);
+  font-weight: bold;
 }
 
 h6 {
   font-size: 0.75em;
-  font-family: var(--font-bold);
+  font-family: var(--font-ui);
+  font-weight: bold;
 }
 
 p {
@@ -66,12 +68,18 @@ b,
 caption,
 strong {
   color: rgb(var(--theme-style-text));
-  font-family: var(--font-bold);
+  font-family: var(--font-ui);
+  font-weight: bold;
+}
+
+i {
+  font-style: italic;
 }
 
 a {
   color: rgb(var(--theme-color-16));
-  text-decoration: none;
+  text-decoration: underline;
+  transition: text-decoration var(--layout-timing-extra-fast);
 }
 
 a:link,
@@ -80,30 +88,18 @@ a:visited {
 }
 
 a:focus {
-  text-decoration: none;
+  text-decoration-color: rgb(var(--theme-style-text));
   outline: none;
 }
 
 a:hover {
   color: rgb(var(--theme-style-text));
-  text-decoration: underline;
+  text-decoration-color: rgb(var(--theme-accent));
 }
 
 a:active {
   color: rgb(var(--theme-style-text));
-}
+  text-decoration-color: rgb(var(--theme-style-text));
-
-.a-underline {
-  padding-bottom: var(--layout-line-width);
-  border-bottom-width: calc(var(--layout-line-width) / 2);
-  border-bottom-style: solid;
-  border-bottom-color: rgb(var(--theme-color-06));
-  transition: color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
-}
-
-.a-underline:hover {
-  text-decoration: none;
-  border-bottom-color: rgb(var(--theme-accent));
 }
 
 ol,
@@ -151,7 +147,8 @@ table thead tr th {
   padding: 0.5em;
   margin: 0;
   text-align: left;
-  font-family: var(--font-bold);
+  font-family: var(--font-ui);
+  font-weight: bold;
   box-sizing: border-box;
 }
 

src/css/variables.css

@@ -265,10 +265,8 @@
                                                         inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
                                                         inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   /* font */
-  --font-regular:                                       "Open Sans Regular", sans-serif;
+  --font-display:                                       "Fjalla One Regular", sans-serif;
-  --font-bold:                                          "Open Sans Bold", sans-serif;
+  --font-ui:                                            "Open Sans Regular", sans-serif;
-  --font-light:                                         "Open Sans Light", sans-serif;
-  --font-fjalla:                                        "Fjalla One Regular", sans-serif;
   /* z index */
   --z-index-background:                                 1000;
   --z-index-link:                                       2000;

src/index.html

@@ -144,14 +144,14 @@
 
       <div class="menu-nav">
         <div class="menu-nav-area-tab menu-nav-area-grow mb-0 list-unstyled">
-          <button class="menu-nav-button control-menu-layout button mb-0 active" tabindex="-1">Layout</button>
+          <button class="menu-nav-button control-menu-layout button button-slim mb-0 active" tabindex="-1">Layout</button>
-          <button class="menu-nav-button control-menu-header button mb-0" tabindex="-1">Header</button>
+          <button class="menu-nav-button control-menu-header button button-slim mb-0" tabindex="-1">Header</button>
-          <button class="menu-nav-button control-menu-groups button mb-0" tabindex="-1">Groups</button>
+          <button class="menu-nav-button control-menu-groups button button-slim mb-0" tabindex="-1">Groups</button>
-          <button class="menu-nav-button control-menu-bookmarks button mb-0" tabindex="-1">Bookmarks</button>
+          <button class="menu-nav-button control-menu-bookmarks button button-slim mb-0" tabindex="-1">Bookmarks</button>
-          <button class="menu-nav-button control-menu-theme button mb-0" tabindex="-1">Theme</button>
+          <button class="menu-nav-button control-menu-theme button button-slim mb-0" tabindex="-1">Theme</button>
-          <button class="menu-nav-button control-menu-background button mb-0" tabindex="-1">Background</button>
+          <button class="menu-nav-button control-menu-background button button-slim mb-0" tabindex="-1">Background</button>
-          <button class="menu-nav-button control-menu-data button mb-0" tabindex="-1">Data</button>
+          <button class="menu-nav-button control-menu-data button button-slim mb-0" tabindex="-1">Data</button>
-          <button class="menu-nav-button control-menu-nightTab button mb-0" tabindex="-1">nightTab</button>
+          <button class="menu-nav-button control-menu-nightTab button button-slim mb-0" tabindex="-1">nightTab</button>
         </div>
         <div class="menu-nav-area-close">
           <button class="menu-nav-button control-menu-close button mb-0" tabindex="-1"><span class="icon-close"></span></button>
@@ -1495,6 +1495,28 @@
               <p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Fonts</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <label for="control-theme-font-display">Display font</label>
+                <input id="control-theme-font-display" class="control-theme-font-display mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+              </div>
+              <p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Clock, Date, Group names and Bookmark Letters.</p>
+              <p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Comfortaa"</p>
+              <p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
+              <hr>
+              <div class="input-wrap">
+                <label for="control-theme-font-ui">UI font</label>
+                <input id="control-theme-font-ui" class="control-theme-font-ui mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+              </div>
+              <p class="control-theme-font-helper form-helper small">Use a <a href="https://fonts.google.com/" target="_blank">Google Font</a> to customise the Bookmark name, URL and form elements.</p>
+              <p class="control-theme-font-helper form-helper small">Paste in a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto" or "Source Sans Pro"</p>
+              <p class="control-theme-font-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Color</h1>
@@ -1856,11 +1878,11 @@
               </div>
               <hr>
               <div class="p-wrap">
-                <p>Project repository on <a href="https://github.com/zombieFox/nightTab" class="a-underline" target="_blank" tabindex="-1">Github</a>.</p>
+                <p>Project repository on <a href="https://github.com/zombieFox/nightTab" target="_blank" tabindex="-1">Github</a>.</p>
               </div>
               <hr>
               <div class="p-wrap">
-                <p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" class="a-underline" target="_blank" tabindex="-1">Issues.</a></p>
+                <p>For feedback and support, submit an <a href="https://github.com/zombieFox/nightTab/issues" target="_blank" tabindex="-1">Issues.</a></p>
               </div>
             </div>
           </div>

src/js/control.js

@@ -2535,6 +2535,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("nighttab");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2548,6 +2550,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("midnight");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2561,6 +2565,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("bluegum");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2574,6 +2580,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("sharpmint");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2587,6 +2595,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("snowblue");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2600,6 +2610,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("chocorum");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2613,6 +2625,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("sunburst");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2626,6 +2640,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("coralgreen");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2639,6 +2655,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("purplegem");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2652,6 +2670,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("hotpepper");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2665,6 +2685,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("steelgrey");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2678,6 +2700,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("outrun");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2691,6 +2715,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("pumpkin");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2704,6 +2730,8 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("whoosh");
+      theme.render.font.display();
+      theme.render.font.ui();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2951,6 +2979,20 @@ var control = (function() {
       theme.render.accent.input.hex();
       link.groupAndItems();
     }
+  }, {
+    element: helper.e(".control-theme-font-display"),
+    path: "theme.font.display",
+    type: "text",
+    func: function() {
+      theme.font.delay.display();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui"),
+    path: "theme.font.ui",
+    type: "text",
+    func: function() {
+      theme.font.delay.ui();
+    }
   }, {
     element: helper.e(".control-background-color-by-theme"),
     path: "background.color.by",

src/js/edge.js

@@ -15,7 +15,7 @@ var edge = (function() {
       }, 100);
     },
     remove: function() {
-      window.clearTimeout(_tick);
+      clearTimeout(_tick);
       _tick = null;
     }
   };

src/js/state.js

@@ -243,6 +243,10 @@ var state = (function() {
           b: 160
         }
       },
+      font: {
+        display: "",
+        ui: ""
+      },
       style: "dark",
       radius: 0.25
     },

src/js/theme.js

@@ -1,7 +1,9 @@
 var theme = (function() {
 
-  var mod = {};
+  var _timerFontDisplay = null;
+  var _timerFontUi = null;
 
+  var mod = {};
 
   mod.style = {
     light: function() {
@@ -109,8 +111,18 @@ var theme = (function() {
     set: function(name) {
       helper.setObject({
         object: state.get.current(),
-        path: "theme.accent.current",
+        path: "theme.style",
-        newValue: mod.preset.all[name].accent
+        newValue: mod.preset.all[name].style
+      });
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.font.display",
+        newValue: mod.preset.all[name].font.display
+      });
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.font.ui",
+        newValue: mod.preset.all[name].font.ui
       });
       helper.setObject({
         object: state.get.current(),
@@ -119,8 +131,8 @@ var theme = (function() {
       });
       helper.setObject({
         object: state.get.current(),
-        path: "theme.style",
+        path: "theme.accent.current",
-        newValue: mod.preset.all[name].style
+        newValue: mod.preset.all[name].accent
       });
       helper.setObject({
         object: state.get.current(),
@@ -130,6 +142,10 @@ var theme = (function() {
     },
     all: {
       nighttab: {
+        font: {
+          display: "",
+          ui: ""
+        },
         color: {
           hsl: {
             h: 222,
@@ -151,16 +167,20 @@ var theme = (function() {
         style: "dark"
       },
       midnight: {
+        font: {
+          display: "Gugi",
+          ui: "Lato"
+        },
         color: {
           hsl: {
-            h: 215,
+            h: 222,
-            s: 41,
+            s: 42,
-            l: 48
+            l: 46
           },
           rgb: {
-            r: 72,
+            r: 68,
-            g: 114,
+            g: 98,
-            b: 172
+            b: 168
           }
         },
         accent: {
@@ -172,6 +192,10 @@ var theme = (function() {
         style: "dark"
       },
       bluegum: {
+        font: {
+          display: "Alatsi",
+          ui: "Source Sans Pro"
+        },
         color: {
           hsl: {
             h: 217,
@@ -193,6 +217,10 @@ var theme = (function() {
         style: "dark"
       },
       sharpmint: {
+        font: {
+          display: "Unica One",
+          ui: "Montserrat"
+        },
         color: {
           hsl: {
             h: 157,
@@ -214,6 +242,10 @@ var theme = (function() {
         style: "dark"
       },
       snowblue: {
+        font: {
+          display: "Righteous",
+          ui: "Raleway"
+        },
         color: {
           hsl: {
             h: 217,
@@ -235,6 +267,10 @@ var theme = (function() {
         style: "light"
       },
       chocorum: {
+        font: {
+          display: "Odibee Sans",
+          ui: "Roboto Condensed"
+        },
         color: {
           hsl: {
             h: 25,
@@ -256,6 +292,10 @@ var theme = (function() {
         style: "dark"
       },
       sunburst: {
+        font: {
+          display: "Fredoka One",
+          ui: "Muli"
+        },
         color: {
           hsl: {
             h: 54,
@@ -277,6 +317,10 @@ var theme = (function() {
         style: "light"
       },
       coralgreen: {
+        font: {
+          display: "Poiret One",
+          ui: "Lato"
+        },
         color: {
           hsl: {
             h: 184,
@@ -298,6 +342,10 @@ var theme = (function() {
         style: "dark"
       },
       purplegem: {
+        font: {
+          display: "Calistoga",
+          ui: "Source Sans Pro"
+        },
         color: {
           hsl: {
             h: 301,
@@ -319,6 +367,10 @@ var theme = (function() {
         style: "light"
       },
       hotpepper: {
+        font: {
+          display: "Big Shoulders Display",
+          ui: "Montserrat"
+        },
         color: {
           hsl: {
             h: 0,
@@ -340,6 +392,10 @@ var theme = (function() {
         style: "dark"
       },
       steelgrey: {
+        font: {
+          display: "Abel",
+          ui: "Raleway"
+        },
         color: {
           hsl: {
             h: 214,
@@ -361,6 +417,10 @@ var theme = (function() {
         style: "light"
       },
       outrun: {
+        font: {
+          display: "Major Mono Display",
+          ui: "Roboto Condensed"
+        },
         color: {
           hsl: {
             h: 227,
@@ -382,6 +442,10 @@ var theme = (function() {
         style: "dark"
       },
       pumpkin: {
+        font: {
+          display: "Girassol",
+          ui: "Muli"
+        },
         color: {
           hsl: {
             h: 198,
@@ -403,6 +467,10 @@ var theme = (function() {
         style: "dark"
       },
       whoosh: {
+        font: {
+          display: "Monoton",
+          ui: "Lato"
+        },
         color: {
           hsl: {
             h: 307,
@@ -537,6 +605,75 @@ var theme = (function() {
     }
   };
 
+  render.font = {
+    delay: {
+      display: function() {
+        clearTimeout(_timerFontDisplay);
+        _timerFontDisplay = setTimeout(render.font.display, 300);
+      },
+      ui: function() {
+        clearTimeout(_timerFontUi);
+        _timerFontUi = setTimeout(render.font.ui, 300);
+      }
+    },
+    display: function() {
+      var name = state.get.current().theme.font.display.trim().replace(/\s+/g, "+");
+      var html = helper.e("html");
+      var link = helper.e(".theme-font-display-link");
+      if (link) {
+        link.remove();
+      };
+      html.style.removeProperty("--font-display");
+      if (name != "") {
+        var head = helper.e("head");
+        var link = helper.makeNode({
+          tag: "link",
+          attr: [{
+            key: "class",
+            value: "theme-font-display-link"
+          }, {
+            key: "href",
+            value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
+          }, {
+            key: "rel",
+            value: "stylesheet"
+          }]
+        });
+        head.appendChild(link);
+        html.style.setProperty("--font-display", "\"" + state.get.current().theme.font.display.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif");
+      };
+    },
+    ui: function() {
+      var name = state.get.current().theme.font.ui.trim().replace(/\s+/g, "+");
+      var html = helper.e("html");
+      var link = helper.eA(".theme-font-ui-link");
+      if (link.length > 0) {
+        link.forEach(function(arrayItem, item) {
+          arrayItem.remove();
+        });
+        html.style.removeProperty("--font-ui");
+      };
+      if (name != "") {
+        var head = helper.e("head");
+        var link = helper.makeNode({
+          tag: "link",
+          attr: [{
+            key: "class",
+            value: "theme-font-ui-link"
+          }, {
+            key: "href",
+            value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
+          }, {
+            key: "rel",
+            value: "stylesheet"
+          }]
+        });
+        head.appendChild(link);
+        html.style.setProperty("--font-ui", "\"" + state.get.current().theme.font.ui.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Open Sans Regular\", sans-serif");
+      };
+    }
+  };
+
   render.preset = function() {
     var html = helper.e("html");
     for (var key in mod.preset.all) {
@@ -617,10 +754,29 @@ var theme = (function() {
     mod.preset.set(name);
   };
 
+  var font = {
+    delay: {
+      display: function() {
+        render.font.delay.display();
+      },
+      ui: function() {
+        render.font.delay.ui();
+      }
+    },
+    display: function() {
+      render.font.display();
+    },
+    ui: function() {
+      render.font.ui();
+    }
+  };
+
   var init = function() {
     style.check();
     accent.random();
     mod.accent.random();
+    render.font.display();
+    render.font.ui();
     render.color.shade();
     render.accent.color();
     render.radius();
@@ -634,6 +790,7 @@ var theme = (function() {
     render: render,
     style: style,
     accent: accent,
+    font: font,
     preset: preset
   };
 

src/js/update.js

@@ -722,6 +722,13 @@ var update = (function() {
         show: true
       };
       return data;
+    },
+    "4.6.0": function(data) {
+      data.state.theme.font = {
+        display: "",
+        ui: ""
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.5.0";
+  var current = "4.6.0";
 
   var name = "Naughty Goose";
 

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"