fix: improve FOUT on clock

add fallback to default fonts, better than Times New Roman :D
husa · Aug 12, 2024 · d1d25cc · d1d25cc
1 parent 373a70a
commit d1d25cc
Showing 1 changed file with 3 additions and 2 deletions.
diff --git 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