diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index bedc1d1f59..97a2057ed2 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -7,9 +7,9 @@
@tailwind components;
@tailwind utilities;
-@import "~flex.box"; // todo: replace with tailwind's flexbox classes
-@import "./fonts";
+@import "~flex.box";
@import "../themes/theme-vars";
+@import "./fonts";
:root {
--unit: 8px;
diff --git a/src/renderer/components/dock/terminal/terminal-dock-tab.scss b/src/renderer/components/dock/terminal/terminal-dock-tab.scss
index 34a49e1330..c65e0bfb7d 100644
--- a/src/renderer/components/dock/terminal/terminal-dock-tab.scss
+++ b/src/renderer/components/dock/terminal/terminal-dock-tab.scss
@@ -4,7 +4,4 @@
*/
.TerminalTab {
- @include font-preload {
- font-family: "RobotoMono", monospace;
- }
}
diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss
index 239f6dce45..fc594561d8 100644
--- a/src/renderer/components/fonts.scss
+++ b/src/renderer/components/fonts.scss
@@ -24,3 +24,13 @@
font-display: block;
src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
}
+
+#fonts-preloading {
+ > .icons {
+ @include font-preload("Material Icons");
+ }
+
+ > .terminal {
+ @include font-preload("RobotoMono");
+ }
+}
diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss
index c9bfd4a835..dd62568219 100755
--- a/src/renderer/components/mixins.scss
+++ b/src/renderer/components/mixins.scss
@@ -60,14 +60,19 @@
}
}
-// Makes custom font available at earlier stages (start preloading)
-// Element must be in DOM and contain some text of loading font.
-@mixin font-preload() {
+// Makes custom @font-family available at earlier stages.
+// Element must exist in DOM as soon as possible to initiate preloading.
+@mixin font-preload($fontFamily) {
+ position: absolute;
+ visibility: hidden;
+ height: 0;
+
&:before {
width: 0;
display: block;
overflow: hidden;
- content: "x"; // required
- @content; // must contain `font-family`
+ content: "x"; // some text required to start applying font in document
+ font-family: $fontFamily; // imported name in @font-face declaration
+ @content;
}
}
diff --git a/src/renderer/template.html b/src/renderer/template.html
index ba4dbb153d..79014c6009 100755
--- a/src/renderer/template.html
+++ b/src/renderer/template.html
@@ -2,13 +2,16 @@
-
-
+
+
+
+
+