diff --git a/src/renderer/components/app.tsx b/src/renderer/components/app.tsx
index a740043932..98e8e5e4af 100755
--- a/src/renderer/components/app.tsx
+++ b/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.rootElem);
};
diff --git a/src/renderer/components/dock/terminal.ts b/src/renderer/components/dock/terminal.ts
index 298526421d..6ff41a149c 100644
--- a/src/renderer/components/dock/terminal.ts
+++ b/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;
}
diff --git a/types/font-face.d.ts b/types/font-face.d.ts
new file mode 100644
index 0000000000..cb1d3e84f4
--- /dev/null
+++ b/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;
+ variationSettings: CSSOMString;
+ display: CSSOMString;
+ load(): Promise;
+ }
+
+ interface FontFaceDescriptors {
+ family: CSSOMString;
+ style: CSSOMString;
+ weight: CSSOMString;
+ stretch: CSSOMString;
+ unicodeRange: CSSOMString;
+ variant: CSSOMString;
+ featureSettings: CSSOMString;
+ }
+
+ interface FontFaceSet extends Iterable {
+ readonly status: FontFaceSetStatus;
+ readonly ready: Promise;
+ add(font: FontFace): void;
+ check(font: string, text?: string): Boolean; // might not work, throws exception
+ load(font: string, text?: string): Promise
+ delete(font: FontFace): void;
+ clear(): void;
+ }
+}
\ No newline at end of file
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index 2ca1e85ff5..b193b62015 100755
--- a/webpack.renderer.ts
+++ b/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$/,