custom terminal fonts -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/app.scss

@@ -9,7 +9,6 @@
 
 @import "~flex.box";
 @import "../themes/theme-vars";
-@import "./fonts";
 
 :root {
   --unit: 8px;
@@ -17,7 +16,8 @@
   --margin: var(--unit);
   --border-radius: 3px;
   --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  --font-monospace: Lucida Console, Monaco, Consolas, monospace;
+  --font-monospace: Lucida Console, Monaco, Consolas, monospace; // some defaults
+  --font-terminal: var(--font-monospace); // overridden in terminal.ts
   --font-size-small: calc(1.5 * var(--unit));
   --font-size: calc(1.75 * var(--unit));
   --font-size-big: calc(2 * var(--unit));
@@ -227,6 +227,19 @@ a {
   }
 }
 
+// import and preload all bundled fonts
+@import "fonts";
+
+#fonts-preloading {
+  > .icons {
+    @include font-preload("Material Icons");
+  }
+
+  > .terminal {
+    @include font-preload("RobotoMono");
+  }
+}
+
 // app's common loading indicator, displaying on the route transitions
 #loading {
   position: absolute;

src/renderer/components/dock/terminal/terminal.ts

@@ -64,16 +64,26 @@ export class Terminal {
     }
   }
 
-  constructor(protected readonly dependencies: TerminalDependencies, { tabId, api }: TerminalArguments) {
+  get fontFamily() {
+    return this.dependencies.terminalConfig.get().fontFamily;
+  }
+
+  get fontSize() {
+    return this.dependencies.terminalConfig.get().fontSize;
+  }
+
+  constructor(protected readonly dependencies: TerminalDependencies, {
+    tabId,
+    api
+  }: TerminalArguments) {
     this.tabId = tabId;
     this.api = api;
-    const { fontSize, fontFamily } = this.dependencies.terminalConfig.get();
 
     this.xterm = new XTerm({
       cursorBlink: true,
       cursorStyle: "bar",
-      fontSize,
-      fontFamily,
+      fontSize: this.fontSize,
+      fontFamily: this.fontFamily,
     });
     // enable terminal addons
     this.xterm.loadAddon(this.fitAddon);
@@ -100,12 +110,8 @@ export class Terminal {
       }, {
         fireImmediately: true,
       }),
-      reaction(() => this.dependencies.terminalConfig.get().fontSize, this.setFontSize, {
-        fireImmediately: true,
-      }),
-      reaction(() => this.dependencies.terminalConfig.get().fontFamily, this.setFontFamily, {
-        fireImmediately: true,
-      }),
+      reaction(() => this.fontSize, this.setFontSize, { fireImmediately: true, }),
+      reaction(() => this.fontFamily, this.setFontFamily, { fireImmediately: true, }),
       () => onDataHandler.dispose(),
       () => this.fitAddon.dispose(),
       () => this.api.removeAllListeners(),
@@ -201,8 +207,11 @@ export class Terminal {
     this.xterm.options.fontSize = size;
   };
 
-  setFontFamily = (family: string) => {
-    this.xterm.options.fontFamily = family;
+  setFontFamily = (fontFamily: string) => {
+    this.xterm.options.fontFamily = fontFamily;
+
+    // provide access to current terminal-font in css in :root {}
+    document.documentElement.style.setProperty("--font-terminal", fontFamily);
   };
 
   keyHandler = (evt: KeyboardEvent): boolean => {

src/renderer/components/fonts.scss

@@ -3,9 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-// Custom fonts
-@import "~typeface-roboto/index.css";
-
 // Material Design Icons, used primarily in icon.tsx
 // Latest: https://github.com/google/material-design-icons/tree/master/font
 @font-face {
@@ -13,24 +10,59 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
+  src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
+}
+
+// Terminal fonts (monospaced)
+// Source: https://fonts.google.com/?category=Monospace
+@font-face {
+  font-family: 'Anonymous Pro', monospace;
+  src: local('Anonymous Pro'), url('../fonts/AnonymousPro-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono', monospace;
+  src: local('IBM Plex Mono'), url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono', monospace;
+  src: local('JetBrains Mono'), url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Red Hat Mono', monospace;
+  src: local('Red Hat Mono'), url('../fonts/RedHatMono-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+
+@font-face {
+  font-family: 'Source Code Pro', monospace;
+  src: local('Source Code Pro'), url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Space Mono', monospace;
+  src: local('Space Mono'), url('../fonts/SpaceMono-Regular.ttf') format('truetype');
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono', monospace;
+  src: local('Ubuntu Mono'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype');
+  font-display: block;
 }
 
 // Patched RobotoMono font with icons
 // RobotoMono Windows Compatible for using in terminal
 // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
 @font-face {
-  font-family: 'RobotoMono';
+  font-family: 'RobotoMono', monospace;
+  src: local('RobotoMono'), url('../fonts/roboto-mono-nerd.ttf') format('truetype');
   font-display: block;
-  src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
-}
-
-#fonts-preloading {
-  > .icons {
-    @include font-preload("Material Icons");
-  }
-
-  > .terminal {
-    @include font-preload("RobotoMono");
-  }
 }