Customizable fonts

src/App.tsx

@@ -19,6 +19,7 @@ import { Loading, MainLayout } from './components';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
+import 'react-fontpicker-ts/dist/index.css';
 
 import '@gfazioli/mantine-text-animate/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -54,7 +55,7 @@ function App() {
 			search: colorsTuple(theme.searchColor),
 		},
 		white: theme?.backgroundColor,
-		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
+		fontFamily: `${personalData?.[0]?.defaultFont},Helvetica Neue,Roboto,system-ui,sans-serif`,
 		autoContrast: true,
 	});
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
@@ -81,7 +82,12 @@ function App() {
 	);
 
 	useEffect(() => {
-		if (allThemes && themeName && personalData && isThemePlaylistsFetched) {
+		if (
+			allThemes &&
+			themeName &&
+			Object.keys(personalData).length > 0 &&
+			isThemePlaylistsFetched
+		) {
 			if (currentThemePlaylist === 'All') {
 				if (themeName === 'random') {
 					handleThemeChange(allThemes, false);