diff --git a/packages/ui/src/components/font-family/FontFamily.tsx b/packages/ui/src/components/font-family/FontFamily.tsx
index 31f376aca1..a01ca8bacf 100644
--- a/packages/ui/src/components/font-family/FontFamily.tsx
+++ b/packages/ui/src/components/font-family/FontFamily.tsx
@@ -45,15 +45,19 @@ export const FontFamily = ({ id, value, disabled$ }: IFontFamilyProps) => {
 
     const viewValue = useMemo(() => {
         if (value == null) return '';
-        let fontFamily = localeService.t(`fontFamily.${(`${value ?? ''}`).replace(/\s/g, '')}`);
 
-        // Handle font family from copy paste.
-        if (fontFamily.startsWith('fontFamily.') && typeof value === 'string') {
-            fontFamily = value.split(',')[0];
+        const fixedValue = (`${value ?? ''}`).replace(/\s/g, '');
+
+        const font = fonts.find((font) => {
+            return font.value === fixedValue;
+        });
+
+        if (!font) {
+            return fixedValue;
         }
 
-        return fontFamily;
-    }, [value]);
+        return localeService.t(font.label);
+    }, [value, fonts]);
 
     useMemo(() => {
         setInputValue(viewValue);