diff --git a/src/renderer/components/dock/terminal/dock-tab.tsx b/src/renderer/components/dock/terminal/dock-tab.tsx
index 2fc9d436d28f..f08b06f41a68 100644
--- a/src/renderer/components/dock/terminal/dock-tab.tsx
+++ b/src/renderer/components/dock/terminal/dock-tab.tsx
@@ -3,6 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
+import "./terminal-dock-tab.scss";
import React from "react";
import { observer } from "mobx-react";
import { boundMethod, cssNames } from "../../../utils";
diff --git a/src/renderer/components/dock/terminal/terminal-dock-tab.scss b/src/renderer/components/dock/terminal/terminal-dock-tab.scss
new file mode 100644
index 000000000000..34a49e133016
--- /dev/null
+++ b/src/renderer/components/dock/terminal/terminal-dock-tab.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.TerminalTab {
+ @include font-preload {
+ font-family: "RobotoMono", monospace;
+ }
+}
diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss
index a0dcadd400b0..0bfc761c5821 100644
--- a/src/renderer/components/fonts.scss
+++ b/src/renderer/components/fonts.scss
@@ -22,5 +22,6 @@
// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
@font-face {
font-family: 'RobotoMono';
+ font-display: block;
src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
}
diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss
index 4581f0437bc2..c9bfd4a835c2 100755
--- a/src/renderer/components/mixins.scss
+++ b/src/renderer/components/mixins.scss
@@ -59,3 +59,15 @@
@content; // css-modules (*.module.scss)
}
}
+
+// Makes custom font available at earlier stages (start preloading)
+// Element must be in DOM and contain some text of loading font.
+@mixin font-preload() {
+ &:before {
+ width: 0;
+ display: block;
+ overflow: hidden;
+ content: "x"; // required
+ @content; // must contain `font-family`
+ }
+}
diff --git a/src/renderer/template.html b/src/renderer/template.html
index fd4d35c5a609..ba4dbb153d8a 100755
--- a/src/renderer/template.html
+++ b/src/renderer/template.html
@@ -2,6 +2,8 @@
+
+
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index ec99f831df2c..56be35869c21 100755
--- a/webpack.renderer.ts
+++ b/webpack.renderer.ts
@@ -17,14 +17,8 @@ import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
export function webpackLensRenderer(): webpack.Configuration {
console.info("WEBPACK:renderer", vars);
- const {
- appName,
- buildDir,
- htmlTemplate,
- isDevelopment,
- publicPath,
- rendererDir,
- } = vars;
+ const assetsFolderName = "assets";
+ const { appName, buildDir, htmlTemplate, isDevelopment, publicPath, rendererDir } = vars;
return {
target: "electron-renderer",
@@ -42,7 +36,7 @@ export function webpackLensRenderer(): webpack.Configuration {
path: buildDir,
filename: "[name].js",
chunkFilename: "chunks/[name].js",
- assetModuleFilename: "assets/[name][ext][query]",
+ assetModuleFilename: `${assetsFolderName}/[name][ext][query]`,
},
watchOptions: {
ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
@@ -97,6 +91,9 @@ export function webpackLensRenderer(): webpack.Configuration {
template: htmlTemplate,
inject: true,
hash: true,
+ templateParameters: {
+ assetPath: `${publicPath}${assetsFolderName}`,
+ },
}),
new CircularDependencyPlugin({