fix: preload font for terminal

src/renderer/components/app.tsx

@@ -33,6 +33,7 @@ import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale
 import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../api/rbac";
+import { Terminal } from "./dock/terminal";
 
 @observer
 export class App extends React.Component {
@@ -41,6 +42,7 @@ export class App extends React.Component {
   static async init() {
     await i18nStore.init();
     await configStore.init();
+    await Terminal.preloadFonts();
     render(<App/>, App.rootElem);
   };
 

src/renderer/components/dock/terminal.ts

@@ -5,7 +5,7 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import { TerminalApi } from "../../api/terminal-api";
 import { themeStore } from "../../theme.store";
-import { autobind } from "../../utils";
+import { autobind } from "../../utils/autobind";
 
 export class Terminal {
   static spawningPool: HTMLElement;
@@ -20,6 +20,13 @@ export class Terminal {
     Terminal.spawningPool = pool;
   }
 
+  static async preloadFonts(){
+    var fontPath = require("../fonts/roboto-mono-nerd.ttf").default;
+    var fontFace = new FontFace("RobotoMono", `url(${fontPath})`);
+    await fontFace.load();
+    document.fonts.add(fontFace);
+  }
+
   public xterm: XTerm;
   public fitAddon: FitAddon;
   public scrollPos = 0;
@@ -67,7 +74,7 @@ export class Terminal {
     Terminal.spawningPool.appendChild(this.elem);
   }
 
-  init() {
+  async init() {
     if (this.xterm) {
       return;
     }

types/font-face.d.ts

@@ -0,0 +1,44 @@
+// https://www.w3.org/TR/css-font-loading/
+// https://developer.mozilla.org/en-US/docs/Web/API/FontFace
+export {}
+
+declare global {
+  const FontFace: FontFace;
+
+  interface Document {
+    fonts: FontFaceSet
+  }
+
+  type CSSOMString = string;
+  type FontFaceLoadStatus = 'unloaded' | 'loading' | 'loaded' | 'error';
+  type FontFaceSetStatus = 'loading' | 'loaded';
+
+  interface FontFace extends FontFaceDescriptors {
+    new(family: string, source: string | ArrayBuffer, descriptors?: FontFaceDescriptors): FontFace;
+    readonly status: FontFaceLoadStatus;
+    readonly loaded: Promise<FontFace>;
+    variationSettings: CSSOMString;
+    display: CSSOMString;
+    load(): Promise<FontFace>;
+  }
+
+  interface FontFaceDescriptors {
+    family: CSSOMString;
+    style: CSSOMString;
+    weight: CSSOMString;
+    stretch: CSSOMString;
+    unicodeRange: CSSOMString;
+    variant: CSSOMString;
+    featureSettings: CSSOMString;
+  }
+
+  interface FontFaceSet extends Iterable<FontFace> {
+    readonly status: FontFaceSetStatus;
+    readonly ready: Promise<FontFaceSet>;
+    add(font: FontFace): void;
+    check(font: string, text?: string): Boolean; // might not work, throws exception
+    load(font: string, text?: string): Promise<FontFace[]>
+    delete(font: FontFace): void;
+    clear(): void;
+  }
+}

webpack.renderer.ts

@@ -95,7 +95,12 @@ export function webpackConfigReact(): webpack.Configuration {
         },
         {
           test: /\.(ttf|eot|woff2?)$/,
-          use: "file-loader?name=fonts/[name].[ext]"
+          use: {
+            loader: "url-loader",
+            options: {
+              name: "fonts/[name].[ext]"
+            }
+          }
         },
         {
           test: /\.s?css$/,