[feature] add font weight and style controls

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.6.3",
+  "version": "4.7.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,7 +12,9 @@ body {
   color: rgb(var(--theme-style-text));
   font-size: 1rem;
   line-height: 1.6;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   display: flex;
   flex-direction: column;
   justify-content: center;

src/css/button.css

@@ -8,7 +8,9 @@ input[type="submit"] {
   margin: 0 0 1em 0;
   color: rgb(var(--button-text));
   font-size: 1em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   min-height: 2.5em;
   line-height: 1;
   border: 0;

src/css/clock.css

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

src/css/date.css

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

src/css/fonts.css

@@ -1,90 +1,66 @@
 /* open sans */
 @font-face {
-  font-family: "Open Sans Bold";
+  font-family: "Open Sans";
-  src: url("../fonts/open-sans/open-sans-bold.eot");
-  src: url("../fonts/open-sans/open-sans-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-bold.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans Regular";
-  src: url("../fonts/open-sans/open-sans-regular.eot");
-  src: url("../fonts/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-regular.woff2") format("woff2"), url("../fonts/open-sans/open-sans-regular.woff") format("woff"), url("../fonts/open-sans/open-sans-regular.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans Light";
   src: url("../fonts/open-sans/open-sans-light.eot");
   src: url("../fonts/open-sans/open-sans-light.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-light.woff2") format("woff2"), url("../fonts/open-sans/open-sans-light.woff") format("woff"), url("../fonts/open-sans/open-sans-light.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans Bold Italic";
+  font-family: "Open Sans";
-  src: url("../fonts/open-sans/open-sans-bold-italic.eot");
-  src: url("../fonts/open-sans/open-sans-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-bold-italic.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans Italic";
-  src: url("../fonts/open-sans/open-sans-italic.eot");
-  src: url("../fonts/open-sans/open-sans-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-italic.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans Light Italic";
   src: url("../fonts/open-sans/open-sans-light-italic.eot");
   src: url("../fonts/open-sans/open-sans-light-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-light-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-light-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-light-italic.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/open-sans/open-sans-regular.eot");
+  src: url("../fonts/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-regular.woff2") format("woff2"), url("../fonts/open-sans/open-sans-regular.woff") format("woff"), url("../fonts/open-sans/open-sans-regular.ttf") format("truetype");
+  font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans Semi Bold Italic";
+  font-family: "Open Sans";
+  src: url("../fonts/open-sans/open-sans-italic.eot");
+  src: url("../fonts/open-sans/open-sans-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Open Sans";
   src: url("../fonts/open-sans/open-sans-semi-bold-italic.eot");
   src: url("../fonts/open-sans/open-sans-semi-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-semi-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-semi-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-semi-bold-italic.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 600;
-  font-style: normal;
+  font-style: italic;
 }
 
 @font-face {
-  font-family: "Open Sans Semi Bold";
+  font-family: "Open Sans";
   src: url("../fonts/open-sans/open-sans-semi-bold.eot");
   src: url("../fonts/open-sans/open-sans-semi-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-semi-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-semi-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-semi-bold.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans Condensed Bold";
+  font-family: "Open Sans";
-  src: url("../fonts/open-sans/open-sans-condensed-bold.eot");
+  src: url("../fonts/open-sans/open-sans-bold.eot");
-  src: url("../fonts/open-sans/open-sans-condensed-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-bold.ttf") format("truetype");
+  src: url("../fonts/open-sans/open-sans-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold.woff") format("woff"), url("../fonts/open-sans/open-sans-bold.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans Condensed Light Italic";
+  font-family: "Open Sans";
-  src: url("../fonts/open-sans/open-sans-condensed-light-italic.eot");
+  src: url("../fonts/open-sans/open-sans-bold-italic.eot");
-  src: url("../fonts/open-sans/open-sans-condensed-light-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-light-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-light-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-light-italic.ttf") format("truetype");
+  src: url("../fonts/open-sans/open-sans-bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-bold-italic.woff2") format("woff2"), url("../fonts/open-sans/open-sans-bold-italic.woff") format("woff"), url("../fonts/open-sans/open-sans-bold-italic.ttf") format("truetype");
-  font-weight: normal;
+  font-weight: 700;
-  font-style: normal;
+  font-style: italic;
-}
-
-@font-face {
-  font-family: "Open Sans Condensed Light";
-  src: url("../fonts/open-sans/open-sans-condensed-light.eot");
-  src: url("../fonts/open-sans/open-sans-condensed-light.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/open-sans-condensed-light.woff2") format("woff2"), url("../fonts/open-sans/open-sans-condensed-light.woff") format("woff"), url("../fonts/open-sans/open-sans-condensed-light.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }
 
 /* fjalla one */

src/css/form.css

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

src/css/greeting.css

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

src/css/group.css

@@ -69,6 +69,7 @@
   display: flex;
   align-items: center;
   height: 0;
+  max-width: 100%;
   overflow: hidden;
   font-size: var(--group-name-size);
   transition: height var(--layout-timing-extra-fast);
@@ -82,6 +83,7 @@
 
 .group-name-text {
   margin-bottom: 0;
+  padding-right: 1em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/css/link.css

@@ -564,7 +564,9 @@
 }
 
 .link-display-letter {
-  font-family: var(--font-display);
+  font-family: var(--theme-font-display-name);
+  font-weight: var(--theme-font-display-weight);
+  font-style: var(--theme-font-display-style);
   color: rgb(var(--theme-accent));
   line-height: 1;
   white-space: nowrap;
@@ -572,6 +574,8 @@
 }
 
 .link-display-icon {
+  font-weight: 400;
+  font-style: normal;
   color: rgb(var(--theme-accent));
   transition: color var(--layout-timing-extra-fast);
 }
@@ -602,7 +606,9 @@
 .link-display-name {
   margin: 0;
   font-size: var(--link-item-display-name-size);
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   color: rgb(var(--theme-color-12));
   display: none;
   transition: color var(--layout-timing-extra-fast);
@@ -873,7 +879,9 @@
 .link-url-text {
   margin: 0;
   font-size: 0.7em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/css/theme.css

@@ -78,11 +78,15 @@
 }
 
 .theme-preset-font-display {
+  font-weight: 400;
+  font-style: normal;
   font-size: 1em;
   margin-bottom: 0.25em;
 }
 
 .theme-preset-font-ui {
+  font-weight: 400;
+  font-style: normal;
   font-size: 0.8em;
 }
 

src/css/tip.css

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

src/css/transitional.css

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

src/css/typography.css

@@ -12,33 +12,45 @@ h6 {
 
 h1 {
   font-size: 1.5em;
-  font-family: var(--font-display);
+  font-family: var(--theme-font-display-name);
+  font-weight: var(--theme-font-display-weight);
+  font-style: var(--theme-font-display-style);
 }
 
 h2 {
   font-size: 1.2em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
 }
 
 h3 {
   font-size: 1.1em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
 }
 
 h4 {
   font-size: 1em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
 }
 
 h5 {
   font-size: 1em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   font-weight: bold;
 }
 
 h6 {
   font-size: 0.75em;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   font-weight: bold;
 }
 
@@ -68,7 +80,9 @@ b,
 caption,
 strong {
   color: rgb(var(--theme-style-text));
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   font-weight: bold;
 }
 
@@ -147,7 +161,9 @@ table thead tr th {
   padding: 0.5em;
   margin: 0;
   text-align: left;
-  font-family: var(--font-ui);
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
   font-weight: bold;
   box-sizing: border-box;
 }

src/css/variables.css

@@ -3,6 +3,12 @@
   --theme-root-font-size:                               14px;
   --theme-accent:                                       250, 130, 0;
   --theme-radius:                                       0.2rem;
+  --theme-font-display-name:                            "Fjalla One Regular", sans-serif;
+  --theme-font-display-weight:                          400;
+  --theme-font-display-style:                           "normal";
+  --theme-font-ui-name:                                 "Open Sans", sans-serif;
+  --theme-font-ui-weight:                               400;
+  --theme-font-ui-style:                                "normal";
   --theme-black:                                        0, 0, 0;
   --theme-white:                                        255, 255, 255;
   --theme-shade-neg-10:                                 25, 25, 25;
@@ -292,9 +298,6 @@
   --edge-shadow:                                        inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
                                                         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-display:                                       "Fjalla One Regular", sans-serif;
-  --font-ui:                                            "Open Sans Regular", sans-serif;
   /* z index */
   --z-index-background:                                 1000;
   --z-index-link:                                       2000;

src/index.html

@@ -38,7 +38,7 @@
   <link rel="stylesheet" href="css/auto-suggest.css">
   <link rel="stylesheet" href="css/fontawesome.css">
   <!-- end-css-block -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel|Alatsi|Big+Shoulders+Display|Calistoga|Fredoka+One|Girassol|Gugi|Lato|Life+Savers|Major+Mono+Display|Monoton|Montserrat|Muli|Odibee+Sans|Poiret+One|Quicksand|Raleway|Righteous|Roboto+Condensed|Source+Sans+Pro|Unica+One|Autour+One|Solway&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Alatsi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Big+Shoulders+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Calistoga:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Fredoka+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Girassol:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Gugi:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Lato:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Life+Savers:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Major+Mono+Display:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Monoton:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Muli:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Odibee+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Poiret+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Quicksand:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Righteous:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Source+Sans+Pro:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Unica+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Autour+One:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Solway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap">
 </head>
 
 <body>
@@ -1157,18 +1157,18 @@
                 <div class="input-wrap">
                   <input id="control-link-item-display-name-show" class="control-link-item-display-name-show" type="checkbox" tabindex="-1">
                   <label for="control-link-item-display-name-show"><span class="label-icon"></span> Name</label>
-                  <div class="form-indent">
+                </div>
-                    <div class="input-wrap">
+                <div class="form-indent">
-                      <label for="control-link-item-display-name-size">Name size</label>
+                  <div class="input-wrap">
-                      <div class="form-group form-group-block mb-0">
+                    <label for="control-link-item-display-name-size">Name size</label>
-                        <input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
+                    <div class="form-group form-group-block mb-0">
-                        <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                      <input id="control-link-item-display-name-size" class="control-link-item-display-name-size mr-3" type="range" min="10" max="3000" step="10" value="0" tabindex="-1">
-                      </div>
+                      <div class="control-link-item-display-name-size-count form-group-text form-group-item-medium form-group-radius-left"></div>
-                    </div>
-                    <div class="button-wrap">
-                      <button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
                     </div>
                   </div>
+                  <div class="button-wrap">
+                    <button class="control-link-item-display-name-size-default button mb-0" tabindex="-1">Default Name size</button>
+                  </div>
                 </div>
                 <hr>
                 <div class="input-wrap">
@@ -1578,20 +1578,72 @@
             </div>
             <div class="menu-item-form">
               <div class="input-wrap">
-                <label for="control-theme-font-display">Display font</label>
+                <label for="control-theme-font-display-name">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">
+                <input id="control-theme-font-display-name" class="control-theme-font-display-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-font-display-name-default button mb-0" tabindex="-1">Default display font</button>
+              </div>
+              <p class="control-theme-font-display-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-display-helper form-helper small">Add 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-display-helper form-helper small">Clear the field to use the default font "Fjalla".</p>
+              <div class="form-indent">
+                <hr>
+                <div class="input-wrap">
+                  <label for="control-theme-font-display-weight">Font weight</label>
+                  <div class="form-group form-group-block mb-0">
+                    <input id="control-theme-font-display-weight" class="control-theme-font-display-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
+                    <div class="control-theme-font-display-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  </div>
+                </div>
+                <p class="control-theme-font-display-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
+                <hr>
+                <div class="input-wrap">
+                  <input id="control-theme-font-display-style-normal" class="control-theme-font-display-style-normal" type="radio" name="control-theme-font-display-style" value="normal" tabindex="-1">
+                  <label for="control-theme-font-display-style-normal"><span class="label-icon"></span> Normal</label>
+                </div>
+                <div class="input-wrap">
+                  <input id="control-theme-font-display-style-italic" class="control-theme-font-display-style-italic" type="radio" name="control-theme-font-display-style" value="italic" tabindex="-1">
+                  <label for="control-theme-font-display-style-italic"><span class="label-icon"></span> Italic</label>
+                </div>
+                <div class="button-wrap">
+                  <button class="control-theme-font-display-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
+                </div>
               </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>
+                <label for="control-theme-font-ui-name">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">
+                <input id="control-theme-font-ui-name" class="control-theme-font-ui-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Google font name" tabindex="-1">
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-font-ui-name-default button mb-0" tabindex="-1">Default UI font</button>
+              </div>
+              <p class="control-theme-font-ui-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-ui-helper form-helper small">Add 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-ui-helper form-helper small">Clear the field to use the default font "Open Sans".</p>
+              <div class="form-indent">
+                <hr>
+                <div class="input-wrap">
+                  <label for="control-theme-font-ui-weight">Font weight</label>
+                  <div class="form-group form-group-block mb-0">
+                    <input id="control-theme-font-ui-weight" class="control-theme-font-ui-weight mr-3" type="range" min="100" max="900" step="100" value="1" tabindex="-1">
+                    <div class="control-theme-font-ui-weight-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                  </div>
+                </div>
+                <p class="control-theme-font-ui-helper form-helper small">Not all fonts support all weights. Refer to the Google Font page to see which are available.</p>
+                <hr>
+                <div class="input-wrap">
+                  <input id="control-theme-font-ui-style-normal" class="control-theme-font-ui-style-normal" type="radio" name="control-theme-font-ui-style" value="normal" tabindex="-1">
+                  <label for="control-theme-font-ui-style-normal"><span class="label-icon"></span> Normal</label>
+                </div>
+                <div class="input-wrap">
+                  <input id="control-theme-font-ui-style-italic" class="control-theme-font-ui-style-italic" type="radio" name="control-theme-font-ui-style" value="italic" tabindex="-1">
+                  <label for="control-theme-font-ui-style-italic"><span class="label-icon"></span> Italic</label>
+                </div>
+                <div class="button-wrap">
+                  <button class="control-theme-font-ui-weight-style-default button mb-0" tabindex="-1">Default weight and style</button>
+                </div>
               </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">

src/js/control.js

@@ -2556,8 +2556,12 @@ var control = (function() {
       }));
       render.update();
       render.class();
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2569,8 +2573,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("midnight");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2584,8 +2592,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("pym");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2599,8 +2611,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("cruiser");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2614,8 +2630,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("sharpmint");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2629,8 +2649,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("snowglow");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2644,8 +2668,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("rumble");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2659,8 +2687,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("sollight");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2674,8 +2706,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("artdeco");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2689,8 +2725,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("macaroon");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2704,8 +2744,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("hotpepper");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2719,8 +2763,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("steel");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2734,8 +2782,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("outrun");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2749,8 +2801,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("pumpkin");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2764,8 +2820,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("bubblegum");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2779,8 +2839,12 @@ var control = (function() {
     type: "button",
     func: function() {
       theme.preset("elderbean");
-      theme.render.font.display();
+      theme.render.font.display.name();
-      theme.render.font.ui();
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      theme.render.font.ui.name();
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2804,16 +2868,119 @@ var control = (function() {
       theme.style.light();
     }
   }, {
-    element: helper.e(".control-theme-radius"),
+    element: helper.e(".control-theme-font-display-name"),
-    path: "theme.radius",
+    path: "theme.font.display.name",
-    type: "range",
+    type: "text",
-    valueMod: ["float"],
-    rangeCountElement: helper.e(".control-theme-radius-count"),
     func: function() {
-      theme.render.radius();
+      theme.render.font.delay.display();
-      render.class();
+    }
+  }, {
+    element: helper.e(".control-theme-font-display-name-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.font.display.name", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.display.name"
+      }));
+      theme.render.font.display.name();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-font-display-weight"),
+    path: "theme.font.display.weight",
+    type: "range",
+    rangeCountElement: helper.e(".control-theme-font-display-weight-count"),
+    func: function() {
+      theme.render.font.display.weight();
       render.range.count(this);
     }
+  }, {
+    element: helper.e(".control-theme-font-display-weight-style-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.font.display.weight", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.display.weight"
+      }));
+      mod.setValue("theme.font.display.style", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.display.style"
+      }));
+      theme.render.font.display.weight();
+      theme.render.font.display.style();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-font-display-style-normal"),
+    path: "theme.font.display.style",
+    type: "radio",
+    func: function() {
+      theme.render.font.display.style();
+    }
+  }, {
+    element: helper.e(".control-theme-font-display-style-italic"),
+    path: "theme.font.display.style",
+    type: "radio",
+    func: function() {
+      theme.render.font.display.style();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-name"),
+    path: "theme.font.ui.name",
+    type: "text",
+    func: function() {
+      theme.render.font.delay.ui();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-name-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.font.ui.name", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.ui.name"
+      }));
+      theme.render.font.ui.name();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-weight"),
+    path: "theme.font.ui.weight",
+    type: "range",
+    rangeCountElement: helper.e(".control-theme-font-ui-weight-count"),
+    func: function() {
+      theme.render.font.ui.weight();
+      render.range.count(this);
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-weight-style-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.font.ui.weight", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.ui.weight"
+      }));
+      mod.setValue("theme.font.ui.style", helper.getObject({
+        object: state.get.default(),
+        path: "theme.font.ui.style"
+      }));
+      theme.render.font.ui.weight();
+      theme.render.font.ui.style();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-style-normal"),
+    path: "theme.font.ui.style",
+    type: "radio",
+    func: function() {
+      theme.render.font.ui.style();
+    }
+  }, {
+    element: helper.e(".control-theme-font-ui-style-italic"),
+    path: "theme.font.ui.style",
+    type: "radio",
+    func: function() {
+      theme.render.font.ui.style();
+    }
   }, {
     element: helper.e(".control-theme-radius-default"),
     type: "button",
@@ -3018,6 +3185,17 @@ var control = (function() {
     func: function() {
       render.class();
     }
+  }, {
+    element: helper.e(".control-theme-radius"),
+    path: "theme.radius",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-theme-radius-count"),
+    func: function() {
+      theme.render.radius();
+      render.class();
+      render.range.count(this);
+    }
   }, {
     element: helper.e(".control-theme-accent-randomise"),
     type: "button",
@@ -3028,20 +3206,6 @@ 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/state.js

@@ -244,8 +244,16 @@ var state = (function() {
         }
       },
       font: {
-        display: "",
+        display: {
-        ui: ""
+          name: "",
+          weight: 400,
+          style: "normal"
+        },
+        ui: {
+          name: "",
+          weight: 400,
+          style: "normal"
+        }
       },
       style: "dark",
       radius: 0.25
@@ -368,8 +376,16 @@ var state = (function() {
         }
       },
       font: {
-        display: "",
+        display: {
-        ui: ""
+          name: "",
+          weight: 400,
+          style: "normal"
+        },
+        ui: {
+          name: "",
+          weight: 400,
+          style: "normal"
+        }
       },
       style: "dark",
       radius: 0.25

src/js/theme.js

@@ -142,8 +142,16 @@ var theme = (function() {
     all: {
       nighttab: {
         font: {
-          display: "Fjalla One Regular",
+          display: {
-          ui: "Open Sans Regular"
+            name: "Fjalla One Regular",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Open Sans",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -167,8 +175,16 @@ var theme = (function() {
       },
       midnight: {
         font: {
-          display: "Gugi",
+          display: {
-          ui: "Lato"
+            name: "Gugi",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Lato",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -192,8 +208,16 @@ var theme = (function() {
       },
       pym: {
         font: {
-          display: "Autour One",
+          display: {
-          ui: "Solway"
+            name: "Autour One",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Solway",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -217,8 +241,16 @@ var theme = (function() {
       },
       cruiser: {
         font: {
-          display: "Alatsi",
+          display: {
-          ui: "Source Sans Pro"
+            name: "Alatsi",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Source Sans Pro",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -242,8 +274,16 @@ var theme = (function() {
       },
       sharpmint: {
         font: {
-          display: "Unica One",
+          display: {
-          ui: "Montserrat"
+            name: "Unica One",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Montserrat",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -267,8 +307,16 @@ var theme = (function() {
       },
       snowglow: {
         font: {
-          display: "Righteous",
+          display: {
-          ui: "Raleway"
+            name: "Righteous",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Raleway",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -292,8 +340,16 @@ var theme = (function() {
       },
       rumble: {
         font: {
-          display: "Odibee Sans",
+          display: {
-          ui: "Roboto Condensed"
+            name: "Odibee Sans",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Roboto Condensed",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -317,8 +373,16 @@ var theme = (function() {
       },
       sollight: {
         font: {
-          display: "Fredoka One",
+          display: {
-          ui: "Muli"
+            name: "Fredoka One",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Muli",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -342,8 +406,16 @@ var theme = (function() {
       },
       artdeco: {
         font: {
-          display: "Poiret One",
+          display: {
-          ui: "Lato"
+            name: "Poiret One",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Lato",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -367,8 +439,16 @@ var theme = (function() {
       },
       macaroon: {
         font: {
-          display: "Calistoga",
+          display: {
-          ui: "Source Sans Pro"
+            name: "Calistoga",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Source Sans Pro",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -392,8 +472,16 @@ var theme = (function() {
       },
       hotpepper: {
         font: {
-          display: "Big Shoulders Display",
+          display: {
-          ui: "Montserrat"
+            name: "Big Shoulders Display",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Montserrat",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -417,8 +505,16 @@ var theme = (function() {
       },
       steel: {
         font: {
-          display: "Abel",
+          display: {
-          ui: "Raleway"
+            name: "Abel",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Raleway",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -442,8 +538,16 @@ var theme = (function() {
       },
       outrun: {
         font: {
-          display: "Major Mono Display",
+          display: {
-          ui: "Roboto Condensed"
+            name: "Major Mono Display",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Roboto Condensed",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -467,8 +571,16 @@ var theme = (function() {
       },
       pumpkin: {
         font: {
-          display: "Girassol",
+          display: {
-          ui: "Muli"
+            name: "Girassol",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Muli",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -492,8 +604,16 @@ var theme = (function() {
       },
       bubblegum: {
         font: {
-          display: "Monoton",
+          display: {
-          ui: "Lato"
+            name: "Monoton",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Lato",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -517,8 +637,16 @@ var theme = (function() {
       },
       elderbean: {
         font: {
-          display: "Life Savers",
+          display: {
-          ui: "Quicksand"
+            name: "Life Savers",
+            weight: 400,
+            style: "normal"
+          },
+          ui: {
+            name: "Quicksand",
+            weight: 400,
+            style: "normal"
+          },
         },
         color: {
           hsl: {
@@ -658,68 +786,90 @@ var theme = (function() {
     delay: {
       display: function() {
         clearTimeout(_timerFontDisplay);
-        _timerFontDisplay = setTimeout(render.font.display, 300);
+        _timerFontDisplay = setTimeout(render.font.display.name, 600);
       },
       ui: function() {
         clearTimeout(_timerFontUi);
-        _timerFontUi = setTimeout(render.font.ui, 300);
+        _timerFontUi = setTimeout(render.font.ui.name, 600);
       }
     },
-    display: function() {
+    display: {
-      var name = state.get.current().theme.font.display.trim().replace(/\s+/g, "+");
+      name: function() {
-      var html = helper.e("html");
+        var name = state.get.current().theme.font.display.name.trim().replace(/\s+/g, "+");
-      var link = helper.e(".theme-font-display-link");
+        var html = helper.e("html");
-      if (link) {
+        var link = helper.e(".theme-font-display-name-link");
-        link.remove();
+        if (link) {
-      };
+          link.remove();
-      html.style.removeProperty("--font-display");
+        };
-      if (name != "") {
+        html.style.removeProperty("--theme-font-display-name");
-        var head = helper.e("head");
+        if (name != "") {
-        var link = helper.makeNode({
+          var head = helper.e("head");
-          tag: "link",
+          var link = helper.makeNode({
-          attr: [{
+            tag: "link",
-            key: "class",
+            attr: [{
-            value: "theme-font-display-link"
+              key: "class",
-          }, {
+              value: "theme-font-display-name-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: "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"
+              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");
+          head.appendChild(link);
-      };
+          html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif");
+        };
+      },
+      weight: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--theme-font-display-weight", state.get.current().theme.font.display.weight);
+      },
+      style: function() {
+        var html = helper.e("html");
+        html.style.removeProperty("--theme-font-display-style");
+        html.style.setProperty("--theme-font-display-style", state.get.current().theme.font.display.style);
+      }
     },
-    ui: function() {
+    ui: {
-      var name = state.get.current().theme.font.ui.trim().replace(/\s+/g, "+");
+      name: function() {
-      var html = helper.e("html");
+        var name = state.get.current().theme.font.ui.name.trim().replace(/\s+/g, "+");
-      var link = helper.eA(".theme-font-ui-link");
+        var html = helper.e("html");
-      if (link.length > 0) {
+        var link = helper.eA(".theme-font-ui-name-link");
-        link.forEach(function(arrayItem, item) {
+        if (link.length > 0) {
-          arrayItem.remove();
+          link.forEach(function(arrayItem, item) {
-        });
+            arrayItem.remove();
-        html.style.removeProperty("--font-ui");
+          });
-      };
+          html.style.removeProperty("--theme-font-ui-name");
-      if (name != "") {
+        };
-        var head = helper.e("head");
+        if (name != "") {
-        var link = helper.makeNode({
+          var head = helper.e("head");
-          tag: "link",
+          var link = helper.makeNode({
-          attr: [{
+            tag: "link",
-            key: "class",
+            attr: [{
-            value: "theme-font-ui-link"
+              key: "class",
-          }, {
+              value: "theme-font-ui-name-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: "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"
+              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");
+          head.appendChild(link);
-      };
+          html.style.setProperty("--theme-font-ui-name", "\"" + state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Open Sans\", sans-serif");
+        };
+      },
+      weight: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--theme-font-ui-weight", state.get.current().theme.font.ui.weight);
+      },
+      style: function() {
+        var html = helper.e("html");
+        html.style.removeProperty("--theme-font-ui-style");
+        html.style.setProperty("--theme-font-ui-style", state.get.current().theme.font.ui.style);
+      }
     }
   };
 
@@ -767,10 +917,10 @@ var theme = (function() {
       };
       html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
       if (preset.font.display != "") {
-        html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display + "\", sans-serif");
+        html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display.name + "\", sans-serif");
       };
       if (preset.font.ui != "") {
-        html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui + "\", sans-serif");
+        html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui.name + "\", sans-serif");
       };
       if (preset.style == "dark") {
         html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-white)");
@@ -816,29 +966,16 @@ 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.display.name();
-    render.font.ui();
+    render.font.display.weight();
+    render.font.display.style();
+    render.font.ui.name();
+    render.font.ui.weight();
+    render.font.ui.style();
     render.color.shade();
     render.accent.color();
     render.radius();
@@ -852,7 +989,6 @@ var theme = (function() {
     render: render,
     style: style,
     accent: accent,
-    font: font,
     preset: preset
   };
 

src/js/update.js

@@ -729,6 +729,19 @@ var update = (function() {
         ui: ""
       };
       return data;
+    },
+    "4.7.0": function(data) {
+      data.state.theme.font.display = {
+        name: data.state.theme.font.display,
+        weight: 400,
+        style: "normal"
+      };
+      data.state.theme.font.ui = {
+        name: data.state.theme.font.ui,
+        weight: 400,
+        style: "normal"
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.6.3";
+  var current = "4.7.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.6.3",
+  "version": "4.7.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"