From d1d25cccc8905f8d248b0c1d391af4364d6ae0ba Mon Sep 17 00:00:00 2001
From: husa <1536549+husa@users.noreply.github.com>
Date: Tue, 13 Aug 2024 01:48:09 +0300
Subject: [PATCH] fix: improve FOUT on clock

add fallback to default fonts, better than Times New Roman :D
---
 src/components/App/App.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index c7c9555..2fa8207 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -65,8 +65,10 @@ const getClockStyleFromSettings = (
   settings: SettingsState,
 ): { fontFamily: string; fontSize: string } => {
   const { fontSize, fontFamily } = settings;
+  const fallbackFont =
+    "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif";
   return {
-    fontFamily,
+    fontFamily: `${fontFamily}, ${fallbackFont}`,
     fontSize: `${fontSize}rem`,
   };
 };
@@ -86,7 +88,6 @@ const App = () => {
           <Clock className="app__clock" />
           <Date className="app__date" />
         </div>
-
         <Dock className="app__dock" onSettingsClick={() => setSettingsOpen(!isSettingsOpen)} />
       </div>
       <CSSTransition