diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
index 719d5431c5..4a2fa4a41f 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
@@ -52,9 +52,7 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
     const [headingFont, setHeadingFont] = useState(values.headingFont || DEFAULT_FONT);
     const [bodyFont, setBodyFont] = useState(values.bodyFont || DEFAULT_FONT);
 
-    const fontClassName = (fontName: string, heading: boolean = true) => {
-        return clsx(getCSSFriendlyFontClassName(fontName), heading && 'font-bold');
-    };
+    const fontClassName = (fontName: string, heading: boolean = true) => clsx(`font-${getCSSFriendlyFontClassName(fontName)}`, heading && 'font-bold');
 
     // Populate the heading and body font options
     const customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map((x) => {