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$/,