Change default fonts

src/renderer/app.tsx

@@ -22,13 +22,11 @@ initSimpleImg({ threshold: 0.05 }, true);
 export const App = () => {
   const theme = useTheme();
   const contentFont = useSettingsStore((state) => state.general.fontContent);
-  const headerFont = useSettingsStore((state) => state.general.fontHeader);
 
   useEffect(() => {
     const root = document.documentElement;
     root.style.setProperty('--content-font-family', contentFont);
-    root.style.setProperty('--header-font-family', headerFont);
+  }, [contentFont]);
-  }, [contentFont, headerFont]);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -66,7 +64,7 @@ export const App = () => {
             xl: 18,
             xs: 10,
           },
-          headings: { fontFamily: 'var(--header-font-family)' },
+          headings: { fontFamily: 'var(--content-font-family)' },
           other: {},
           spacing: {
             lg: 12,

src/renderer/components/virtual-table/headers/generic-table-header.tsx

@@ -21,7 +21,7 @@ const HeaderWrapper = styled.div<{ position: 'left' | 'center' | 'right' }>`
       ? 'center'
       : 'flex-start'};
   width: 100%;
-  font-family: var(--header-font-family);
+  font-family: var(--content-font-family);
   text-transform: uppercase;
 `;
 

src/renderer/features/settings/components/general-tab.tsx

@@ -11,23 +11,12 @@ import {
 import { AppTheme } from '/@/renderer/themes/types';
 
 const FONT_OPTIONS = [
-  { label: 'AnekTamil', value: 'AnekTamil' },
   { label: 'Archivo', value: 'Archivo' },
-  { label: 'Circular STD', value: 'Circular STD' },
+  { label: 'Fredoka', value: 'Fredoka' },
-  { label: 'Didact Gothic', value: 'Didact Gothic' },
+  { label: 'League Spartan', value: 'League Spartan' },
-  { label: 'DM Sans', value: 'DM Sans' },
+  { label: 'Lexend', value: 'Lexend' },
-  { label: 'Encode Sans', value: 'Encode Sans' },
-  { label: 'Epilogue', value: 'Epilogue' },
-  { label: 'Gotham', value: 'Gotham' },
-  { label: 'Inconsolata', value: 'Inconsolata' },
-  { label: 'Inter', value: 'Inter' },
-  { label: 'JetBrains Mono', value: 'JetBrainsMono' },
-  { label: 'Manrope', value: 'Manrope' },
-  { label: 'Montserrat', value: 'Montserrat' },
-  { label: 'Oxygen', value: 'Oxygen' },
   { label: 'Poppins', value: 'Poppins' },
   { label: 'Raleway', value: 'Raleway' },
-  { label: 'Roboto', value: 'Roboto' },
   { label: 'Sora', value: 'Sora' },
   { label: 'Work Sans', value: 'Work Sans' },
 ];
@@ -68,6 +57,7 @@ export const GeneralTab = () => {
     {
       control: (
         <Select
+          searchable
           data={FONT_OPTIONS}
           defaultValue={settings.fontContent}
           onChange={(e) => {
@@ -85,26 +75,6 @@ export const GeneralTab = () => {
       isHidden: false,
       title: 'Font (Content)',
     },
-    {
-      control: (
-        <Select
-          data={FONT_OPTIONS}
-          defaultValue={settings.fontHeader}
-          onChange={(e) => {
-            if (!e) return;
-            setSettings({
-              general: {
-                ...settings,
-                fontHeader: e,
-              },
-            });
-          }}
-        />
-      ),
-      description: 'Sets the application header font',
-      isHidden: false,
-      title: 'Font (Header)',
-    },
   ];
 
   const themeOptions = [

src/renderer/store/settings.store.ts

@@ -83,7 +83,7 @@ export const useSettingsStore = create<SettingsSlice>()(
         },
         general: {
           followSystemTheme: false,
-          fontContent: 'Poppins',
+          fontContent: 'Sora',
           showQueueDrawerButton: false,
           sideQueueType: 'sideDrawerQueue',
           theme: AppTheme.DEFAULT_DARK,

src/renderer/styles/global.scss

@@ -121,74 +121,46 @@ button {
   animation: fadeOut 0.2s forwards;
 }
 
-@font-face {
-  font-family: "AnekTamil";
-  src: url("../fonts/AnekTamil-Regular.ttf") format("truetype");
-}
-
 @font-face {
   font-family: "Archivo";
-  src: url("../fonts/Archivo-Regular.ttf") format("truetype");
+  src: url("../fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "Circular STD";
+  font-family: "Raleway";
-  src: url("../fonts/CircularSTD-Regular.ttf") format("truetype");
+  src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "Didact Gothic";
+  font-family: "Fredoka";
-  src: url("../fonts/DidactGothic-Regular.ttf") format("truetype");
+  src: url("../fonts/Fredoka-VariableFont_wdth,wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "DM Sans";
+  font-family: "League Spartan";
-  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
+  src: url("../fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "Encode Sans";
+  font-family: "Lexend";
-  src: url("../fonts/EncodeSans-Regular.ttf") format("truetype");
+  src: url("../fonts/Lexend-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "Epilogue";
+  font-family: "Sora";
-  src: url("../fonts/Epilogue-Regular.ttf") format("truetype");
+  src: url("../fonts/Sora-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 100 1000;
 }
 
 @font-face {
-  font-family: "Gotham";
+  font-family: "Work Sans";
-  src: url("../fonts/Gotham-Regular.ttf") format("truetype");
+  src: url("../fonts/WorkSans-VariableFont_wght.ttf") format("truetype-variations");
-}
+  font-weight: 100 1000;
-
-@font-face {
-  font-family: "Inconsolata";
-  src: url("../fonts/Inconsolata-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Inter";
-  src: url("../fonts/Inter-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "JetBrainsMono";
-  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Montserrat";
-  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Oxygen";
-  src: url("../fonts/Oxygen-Regular.ttf") format("truetype");
 }
 
 @font-face {
@@ -217,22 +189,8 @@ button {
 
 @font-face {
   font-family: "Raleway";
-  src: url("../fonts/Raleway-Regular.ttf") format("truetype");
+  src: url("../fonts/Raleway-VariableFont_wght.ttf") format("truetype-variations");
-}
+  font-weight: 100 1000;
-
-@font-face {
-  font-family: "Roboto";
-  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Sora";
-  src: url("../fonts/Sora-Regular.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Work Sans";
-  src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
 }
 
 @font-face {

src/renderer/themes/default.scss

@@ -115,7 +115,7 @@
   }
 
   .ag-header-cell-label {
-    font-family: var(--header-font-family);
+    font-family: var(--content-font-family);
     font-weight: 600;
     text-transform: uppercase;
   }