⚡ Reference fonts locally, and documents

docs/theming.md

@@ -43,7 +43,8 @@ It's also possible to set CSS in the config file under `appConfig.customCss`. Ho
 
 ### Loading External Stylesheets
 
-The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. This is handled in [`ThemeHelper.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js).
+The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. You can also pass custom font stylesheets here, they must be in a CSS format (for example, `https://fonts.googleapis.com/css2?family=Cutive+Mono`).
+This is handled in [`ThemeHelper.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js).
 
 For example:
 
@@ -63,6 +64,14 @@ Some UI components have a color option, that can be set in the config file, to f
 - `item.color` - Font and icon color for a given item
 - `item.backgroundColor` - Background color for a given icon
 
+### Typography
+
+Essential fonts bundled within the app are located within `./src/assets/fonts/`. All optional fonts that are used by themes are stored in `./public/fonts/`, if you want to add your own font, this is where you should put it. As with assets, if you're using Docker then using a volume to link a directory on your host system with this path within the container will make management much easier.
+
+Fonts which are not being used by the current theme are **not** fetched on page load. They are instead only loaded into the application if and when they are required. So having multiple themes with various typefaces shouldn't have any negative impact on performance.
+
+Full credit to the typographers behind each of the included fonts. Specifically: Matt McInerney, Christian Robertson, Haley Fiege, Peter Hull, Cyreal and the legendary Vernon Adams
+
 ### CSS Variables
 
 All colors as well as other variable values (such as borders, border-radius, shadows) are specified as CSS variables. This makes theming the application easy, as you only need to change a given color or value in one place. You can find all variables in [`color-palette.scss`](https://github.com/Lissy93/dashy/blob/master/src/styles/color-palette.scss) and the themes which make use of these color variables are specified in [`color-themes.scss`](https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss)

src/styles/color-themes.scss

@@ -150,6 +150,7 @@ html[data-theme='nord-frost'] {
 }
 
 html[data-theme='material-original'] {
+  --font-body: 'Roboto', serif;
   --primary: #29B6F6;
   --settings-text-color: #01579b;
   --background: #e2e1e0;
@@ -255,8 +256,8 @@ html[data-theme='colorful'] {
 }
 
 html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] {
-  --font-body: 'PTMono-Regular', 'Courier New', monospace;
-  --font-headings: 'PTMono-Regular', 'Courier New', monospace;
+  --font-body: 'Courier New', monospace;
+  --font-headings: 'Courier New', monospace;
   
   label.lbl-toggle h3 {
     font-size: 1.8rem;

src/styles/typography.scss

@@ -1,5 +1,5 @@
 
-
+/* Fonts used by the default theme, and bundled within the app */
 @font-face {
   font-family: 'Inconsolata';
   src: url('./assets/fonts/Inconsolata-Light.ttf');
@@ -27,12 +27,12 @@ html {
   vertical-align: baseline;
 
   /* Default app font face */
-  body, div, p, a, span, label, input, button {
+  body, div, p, a, span, label, input, button, .text {
     font-family: var(--font-body);
   }
 
   /* Headings font face */
-  h1, h2, h3, h4, h5 {
+  h1, h2, h3, h4, h5, .heading {
     font-family:  var(--font-headings);
   }
 
@@ -43,18 +43,33 @@ html {
   }
 }
 
-/* Fonts used for external themes */
-/* Material Design Themes */
-@import url('https://fonts.googleapis.com/css2?family=Francois+One&family=Roboto:wght@300&display=swap');
-
-/* Matrix, Hacker, Nerd Themes */
-@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=VT323&display=swap');
-
-/* Colourful */
-@import url('https://fonts.googleapis.com/css2?family=Podkova:wght@500&display=swap');
-
-/* Dracula */
-@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
-
-/* Jam */
-@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
+/* Optional fonts for specific themes */
+/* These fonts are loaded from ./public and therefore not bundled within the apps source */
+@font-face { // Used by Dracula. Credit to Matt McInerney
+  font-family: 'Allerta Stencil';
+  src: url('/fonts/AllertaStencil-Regular.ttf');
+}
+@font-face { // Used by body text in Matrix and Hacker themes. Credit to the late Vernon Adams, RIP
+  font-family: 'Cutive Mono';
+  src: url('/fonts/CutiveMono-Regular.ttf');
+}
+@font-face { // Heading text in Material and Material Dark. Credit to Vernon Adams
+  font-family: 'Francois One';
+  src: url('/fonts/FrancoisOne-Regular.ttf');
+}
+@font-face { // Heading text in Colorful theme. Credit to Cyreal
+  font-family: 'Podkova';
+  src: url('/fonts/Podkova-Medium.ttf');
+}
+@font-face { // Standard body text in material original. Credit to Christian Robertson
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Light.ttf');
+}
+@font-face { // Heading text in Jam, Bee and Tiger themes. Credit to Haley Fiege
+  font-family: 'Sniglet';
+  src: url('/fonts/Sniglet-Regular.ttf');
+}
+@font-face { // Used by heading text in Matrix and Hacker themes. Credit to Peter Hull
+  font-family: 'VT323';
+  src: url('/fonts/VT323-Regular.ttf');
+}