From 150b91d26777c3386a913d797a5e1622a2f4447a Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 28 Mar 2022 15:28:00 +0300 Subject: [PATCH 1/2] always preload app fonts at earliest stages, fix #5019 Signed-off-by: Roman --- src/renderer/components/app.scss | 4 ++-- .../dock/terminal/terminal-dock-tab.scss | 3 --- src/renderer/components/fonts.scss | 13 ++++++++++++- src/renderer/components/mixins.scss | 15 ++++++++++----- src/renderer/template.html | 7 +++++-- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index bedc1d1f5915..97a2057ed290 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 34a49e133016..c65e0bfb7d28 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 239f6dce456b..576446394665 100644 --- a/src/renderer/components/fonts.scss +++ b/src/renderer/components/fonts.scss @@ -4,7 +4,8 @@ */ // Custom fonts -@import "~typeface-roboto/index.css"; +@import "~typeface-roboto"; +@import "./mixins"; // Material Design Icons, used primarily in icon.tsx // Latest: https://github.com/google/material-design-icons/tree/master/font @@ -24,3 +25,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 c9bfd4a835c2..e8d593996ae3 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: "RobotoMono") { + 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 ba4dbb153d8a..79014c6009ad 100755 --- a/src/renderer/template.html +++ b/src/renderer/template.html @@ -2,13 +2,16 @@ - -
+
+ + +
+ From 11b17ce4ec3a211b7c46f212fdb85a6469a0353b Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 29 Mar 2022 12:02:24 +0300 Subject: [PATCH 2/2] attempt to fix tests, clean up Signed-off-by: Roman --- src/renderer/components/fonts.scss | 3 +-- src/renderer/components/mixins.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss index 576446394665..fc594561d803 100644 --- a/src/renderer/components/fonts.scss +++ b/src/renderer/components/fonts.scss @@ -4,8 +4,7 @@ */ // Custom fonts -@import "~typeface-roboto"; -@import "./mixins"; +@import "~typeface-roboto/index.css"; // Material Design Icons, used primarily in icon.tsx // Latest: https://github.com/google/material-design-icons/tree/master/font diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss index e8d593996ae3..dd6256821914 100755 --- a/src/renderer/components/mixins.scss +++ b/src/renderer/components/mixins.scss @@ -62,7 +62,7 @@ // Makes custom @font-family available at earlier stages. // Element must exist in DOM as soon as possible to initiate preloading. -@mixin font-preload($fontFamily: "RobotoMono") { +@mixin font-preload($fontFamily) { position: absolute; visibility: hidden; height: 0;