From e6d63e08635abf8e953839038ec73d6e1f5c86d5 Mon Sep 17 00:00:00 2001
From: Aileen Booker <AileenCGN@gmail.com>
Date: Thu, 24 Oct 2024 16:10:44 +0400
Subject: [PATCH] Fixed custom fonts not styled in select dropdown

---
 .../settings/site/designAndBranding/GlobalSettings.tsx        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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) => {