From 30d22bfb6d5142b64d8e51364a87c674e78375d0 Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 29 Mar 2022 19:15:46 +0300 Subject: [PATCH] Always preload app fonts at earliest stages (#5117) * always preload app fonts at earliest stages, fix #5019 Signed-off-by: Roman * attempt to fix tests, clean up Signed-off-by: Roman --- src/renderer/components/app.scss | 4 ++-- .../dock/terminal/terminal-dock-tab.scss | 3 --- src/renderer/components/fonts.scss | 10 ++++++++++ src/renderer/components/mixins.scss | 15 ++++++++++----- src/renderer/template.html | 7 +++++-- 5 files changed, 27 insertions(+), 12 deletions(-) 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 @@ - -
+
+ + +
+