diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
index f1d0e9f..009a33e 100644
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
+++ b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx
@@ -5,7 +5,7 @@ import { selectClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
-	const { textShadowStyle, largeTextShadowStyle } = useCommonHooks();
+	const { currentUser, textShadowStyle, largeTextShadowStyle } = useCommonHooks();
 	return (
 		<Stack
 			style={{
@@ -31,7 +31,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				'--mantine-color-border-0': selectedTheme?.borderColor,
 				'--mantine-color-search-0': selectedTheme?.searchColor,
 				transition: 'all 0.2s ease',
-				fontFamily: selectedTheme.themeFont ?? undefined,
+				fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
 			}}
 			align='center'
 			gap={0}
@@ -46,7 +46,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 						color: selectedTheme?.primaryColor,
 						borderBottom: `thin solid ${selectedTheme?.borderColor}`,
 						backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
-						fontFamily: selectedTheme.themeFont ?? undefined,
+						fontFamily: selectedTheme.themeFont ?? currentUser.defaultFont,
 					},
 				}}
 				data={[