Font: Add Hack Font back so we have consistent and expectable font rendering

DEPENDENCIES.md

@@ -18,7 +18,8 @@ Major dependencies includes:
 - [iconv-lite](https://github.com/ashtuchkin/iconv-lite), Licensed under MIT license
 - [buffer](https://github.com/feross/buffer), Licensed under MIT license
 - [fontfaceobserver](https://github.com/bramstein/fontfaceobserver), [View license](https://github.com/bramstein/fontfaceobserver/blob/master/LICENSE)
-- [Nerd Font](https://www.nerdfonts.com/), packaged by [@azurity/pure-nerd-font](http://github.com/azurity/pure-nerd-font)
+- [Hack Font](https://github.com/source-foundry/Hack), [View license](https://github.com/source-foundry/Hack/blob/master/LICENSE.md)
+- [Nerd Fonts](https://www.nerdfonts.com/), packaged by [@azurity/pure-nerd-font](http://github.com/azurity/pure-nerd-font)
   includes icons from following fonts:
   - [Powerline Extra Symbols](https://github.com/ryanoasis/powerline-extra-symbols), Licensed under MIT license
   - [Font Awesome](https://github.com/FortAwesome/Font-Awesome), [View license](https://github.com/FortAwesome/Font-Awesome/blob/6.x/LICENSE.txt)

ui/widgets/screen_console.css

@@ -19,19 +19,20 @@
 
 @charset "utf-8";
 
+@import "~hack-font/build/web/hack.css";
 @import "~@azurity/pure-nerd-font/pure-nerd-font.css";
 
 #connector-resource-preload-control-console {
-  font-family: PureNerdFont;
+  font-family: PureNerdFont, Hack;
 }
 #connector-resource-preload-control-console::after {
   content: " ";
-  font-family: PureNerdFont;
+  font-family: PureNerdFont, Hack;
   font-weight: bold;
 }
 #connector-resource-preload-control-console::before {
   content: " ";
-  font-family: PureNerdFont;
+  font-family: PureNerdFont, Hack;
   font-style: italic;
 }
 

ui/widgets/screen_console.vue

@@ -21,7 +21,7 @@
   <div class="screen-console">
     <div
       class="console-console"
-      :style="'font-family: ' + typeface + ', inherit'"
+      :style="'font-family: ' + typefaces + ', inherit'"
     >
       <h2 style="display: none">Console</h2>
 
@@ -117,15 +117,15 @@ import { consoleScreenKeys } from "./screen_console_keys.js";
 import "./screen_console.css";
 import "xterm/css/xterm.css";
 
-const termTypeFace = "PureNerdFont";
+const termTypeFaces = "PureNerdFont, Hack";
-const termFallbackTypeFace = "monospace";
+const termFallbackTypeFace = "\"Cascadia Code\" , monospace";
 const termTypeFaceLoadTimeout = 3000;
 const termTypeFaceLoadError =
-  'Remote font "' +
+  'Remote font ' +
-  termTypeFace +
+  termTypeFaces +
-  '" is unavailable, using "' +
+  ' is unavailable, using ' +
   termFallbackTypeFace +
-  '" instead until the remote font is loaded';
+  ' instead until the remote font is loaded';
 const termDefaultFontSize = 16;
 const termMinFontSize = 8;
 const termMaxFontSize = 36;
@@ -142,7 +142,7 @@ class Term {
       allowTransparency: false,
       cursorBlink: true,
       cursorStyle: "block",
-      fontFamily: termTypeFace + ", " + termFallbackTypeFace,
+      fontFamily: termTypeFaces + ", " + termFallbackTypeFace,
       fontSize: this.fontSize,
       logLevel: process.env.NODE_ENV === "development" ? "info" : "off",
       theme: {
@@ -416,7 +416,7 @@ export default {
     return {
       screenKeys: consoleScreenKeys,
       term: new Term(this.control),
-      typeface: termTypeFace,
+      typefaces: termTypeFaces,
       runner: null,
       eventHandlers: {
         keydown: null,
@@ -456,25 +456,22 @@ export default {
     this.deinit();
   },
   methods: {
-    loadRemoteFont(typeface, timeout) {
+    loadRemoteFont(typefaces, timeout) {
-      return Promise.all([
+      const tfs = typefaces.split(",");
-        new FontFaceObserver(typeface).load(null, timeout),
+      let observers = [];
-        new FontFaceObserver(typeface, {
+      for (let v in tfs) {
+        observers.push(new FontFaceObserver(tfs[v].trim()).load(null, timeout))
+        observers.push(new FontFaceObserver(tfs[v].trim(), {
           weight: "bold",
-        }).load(null, timeout),
+        }).load(null, timeout))
-      ]);
+      }
+      return Promise.all(observers);
     },
-    async retryLoadRemoteFont(typeface, timeout, onSuccess) {
+    async retryLoadRemoteFont(typefaces, timeout, onSuccess) {
       const self = this;
-
       for (;;) {
-        if (self.term.destroyed()) {
-          return;
-        }
-
         try {
-          onSuccess(await self.loadRemoteFont(typeface, timeout));
+          onSuccess(await self.loadRemoteFont(typefaces, timeout));
-
           return;
         } catch (e) {
           // Retry
@@ -483,41 +480,29 @@ export default {
     },
     async openTerm(root, callbacks) {
       const self = this;
-
       try {
-        await self.loadRemoteFont(termTypeFace, termTypeFaceLoadTimeout);
+        await self.loadRemoteFont(termTypeFaces, termTypeFaceLoadTimeout);
-
         if (self.term.destroyed()) {
           return;
         }
-
         root.innerHTML = "";
-
         self.term.init(root);
-
         return;
       } catch (e) {
         // Ignore
       }
-
       if (self.term.destroyed()) {
         return;
       }
-
       root.innerHTML = "";
-
       callbacks.warn(termTypeFaceLoadError, false);
-
       self.term.setFont(termFallbackTypeFace);
       self.term.init(root);
-
+      self.retryLoadRemoteFont(termTypeFaces, termTypeFaceLoadTimeout, () => {
-      self.retryLoadRemoteFont(termTypeFace, termTypeFaceLoadTimeout, () => {
         if (self.term.destroyed()) {
           return;
         }
-
+        self.term.setFont(termTypeFaces);
-        self.term.setFont(termTypeFace);
-
         callbacks.warn(termTypeFaceLoadError, true);
       });
     },