From e6b4fe69c7ebf20f44dac6ffd8ffd6ad7ea1d324 Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Tue, 31 Mar 2026 10:26:13 +0400
Subject: [PATCH] fixed font selection issue

---
 .../Constructor/ElementEditorPanel.tsx        |  5 ++--
 .../CarouselSettingsSection.tsx               |  2 +-
 .../CarouselSettingsSectionCompact.tsx        |  2 +-
 .../DescriptionSettingsSection.tsx            |  4 +--
 .../DescriptionSettingsSectionCompact.tsx     |  4 +--
 .../GallerySettingsSection.tsx                | 12 ++++----
 .../GallerySettingsSectionCompact.tsx         | 16 +++++-----
 .../NavigationSettingsSection.tsx             | 18 ++++++++++++
 .../NavigationSettingsSectionCompact.tsx      | 21 ++++++++++++++
 .../TooltipSettingsSection.tsx                |  4 +--
 .../TooltipSettingsSectionCompact.tsx         |  4 +--
 .../src/components/ElementSettings/types.ts   |  7 +++--
 .../ElementSettings/useElementSettingsForm.ts | 12 +++++---
 .../UiElements/elements/CarouselElement.tsx   | 11 ++++++-
 .../elements/DescriptionElement.tsx           | 22 ++++++++++++--
 .../UiElements/elements/GalleryElement.tsx    | 29 +++++++++++++++++--
 .../UiElements/elements/NavigationElement.tsx | 13 +++++++--
 .../UiElements/elements/TooltipElement.tsx    | 26 +++++++++++++++--
 frontend/src/lib/elementDefaults.ts           |  4 +--
 .../src/pages/element-type-defaults/[id].tsx  |  3 +-
 .../pages/project-element-defaults/[id].tsx   |  3 +-
 frontend/src/types/constructor.ts             |  3 +-
 22 files changed, 175 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Constructor/ElementEditorPanel.tsx b/frontend/src/components/Constructor/ElementEditorPanel.tsx
index bb1957d..29d039d 100644
--- a/frontend/src/components/Constructor/ElementEditorPanel.tsx
+++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx
@@ -366,6 +366,7 @@ export function ElementEditorPanel({
                       }
                       navType={selectedElement.navType}
                       navLabel={selectedElement.navLabel || ''}
+                      navLabelFontFamily={selectedElement.navLabelFontFamily || ''}
                       navDisabled={selectedElement.navDisabled || false}
                       iconUrl={selectedElement.iconUrl || ''}
                       targetPageSlug={selectedElement.targetPageSlug || ''}
@@ -506,8 +507,8 @@ export function ElementEditorPanel({
                           galleryTitleFontFamily={
                             selectedElement.galleryTitleFontFamily || ''
                           }
-                          galleryCardFontFamily={
-                            selectedElement.galleryCardFontFamily || ''
+                          galleryTextFontFamily={
+                            selectedElement.galleryTextFontFamily || ''
                           }
                           galleryCards={selectedElement.galleryCards || []}
                           imageAssetOptions={imageAssetOptions}
diff --git a/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx b/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
index ed4db79..5807cbf 100644
--- a/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
@@ -98,7 +98,7 @@ const CarouselSettingsSection: React.FC<CarouselSettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx
index d45c8dd..063f66d 100644
--- a/frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/CarouselSettingsSectionCompact.tsx
@@ -97,7 +97,7 @@ const CarouselSettingsSectionCompact: React.FC<
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
index 490533b..86f03ec 100644
--- a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
@@ -94,7 +94,7 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
@@ -109,7 +109,7 @@ const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
index 91e10ba..6ca912d 100644
--- a/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx
@@ -129,7 +129,7 @@ const DescriptionSettingsSectionCompact: React.FC<
         >
           <option value=''>Not set</option>
           {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.fontFamily}>
+            <option key={font.key} value={font.key}>
               {font.label}
             </option>
           ))}
@@ -149,7 +149,7 @@ const DescriptionSettingsSectionCompact: React.FC<
         >
           <option value=''>Not set</option>
           {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.fontFamily}>
+            <option key={font.key} value={font.key}>
               {font.label}
             </option>
           ))}
diff --git a/frontend/src/components/ElementSettings/GallerySettingsSection.tsx b/frontend/src/components/ElementSettings/GallerySettingsSection.tsx
index c070504..e3cce15 100644
--- a/frontend/src/components/ElementSettings/GallerySettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/GallerySettingsSection.tsx
@@ -16,7 +16,7 @@ import { FONT_OPTIONS } from '../../lib/fonts';
 const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
   galleryCards,
   galleryTitleFontFamily,
-  galleryCardFontFamily,
+  galleryTextFontFamily,
   onAddCard,
   onRemoveCard,
   onUpdateCard,
@@ -40,22 +40,22 @@ const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
           </select>
         </FormField>
-        <FormField label='Card font family'>
+        <FormField label='Text font family'>
           <select
-            value={galleryCardFontFamily}
+            value={galleryTextFontFamily}
             onChange={(event) =>
-              onChange('galleryCardFontFamily', event.target.value)
+              onChange('galleryTextFontFamily', event.target.value)
             }
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
index 2ee8f84..b8a258f 100644
--- a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
@@ -22,7 +22,7 @@ interface GallerySettingsSectionCompactProps {
   galleryColumns: number;
   // Font settings
   galleryTitleFontFamily: string;
-  galleryCardFontFamily: string;
+  galleryTextFontFamily: string;
   // Cards
   galleryCards: GalleryCard[];
   imageAssetOptions: AssetOption[];
@@ -32,7 +32,7 @@ interface GallerySettingsSectionCompactProps {
     galleryTitle?: string;
     galleryColumns?: number;
     galleryTitleFontFamily?: string;
-    galleryCardFontFamily?: string;
+    galleryTextFontFamily?: string;
   }) => void;
   onAddInfoSpan: () => void;
   onUpdateInfoSpan: (spanId: string, text: string) => void;
@@ -51,7 +51,7 @@ const GallerySettingsSectionCompact: React.FC<
   galleryInfoSpans,
   galleryColumns,
   galleryTitleFontFamily,
-  galleryCardFontFamily,
+  galleryTextFontFamily,
   galleryCards,
   imageAssetOptions,
   onUpdateHeader,
@@ -123,7 +123,7 @@ const GallerySettingsSectionCompact: React.FC<
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
@@ -131,17 +131,17 @@ const GallerySettingsSectionCompact: React.FC<
         </div>
 
         <div>
-          <label className='text-[10px] text-gray-600'>Card font:</label>
+          <label className='text-[10px] text-gray-600'>Text font:</label>
           <select
             className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-            value={galleryCardFontFamily}
+            value={galleryTextFontFamily}
             onChange={(event) =>
-              onUpdateHeader({ galleryCardFontFamily: event.target.value })
+              onUpdateHeader({ galleryTextFontFamily: event.target.value })
             }
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx b/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
index 8e753a1..900296f 100644
--- a/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
@@ -7,10 +7,12 @@
 import React from 'react';
 import FormField from '../FormField';
 import type { NavigationSettingsSectionProps } from './types';
+import { FONT_OPTIONS } from '../../lib/fonts';
 
 const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
   iconUrl,
   navLabel,
+  navLabelFontFamily,
   navType,
   navDisabled,
   targetPageId,
@@ -64,6 +66,22 @@ const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
             />
           </FormField>
 
+          <FormField label='Label font family'>
+            <select
+              value={navLabelFontFamily}
+              onChange={(event) =>
+                onChange('navLabelFontFamily', event.target.value)
+              }
+            >
+              <option value=''>Not set</option>
+              {FONT_OPTIONS.map((font) => (
+                <option key={font.key} value={font.key}>
+                  {font.label}
+                </option>
+              ))}
+            </select>
+          </FormField>
+
           <FormField label='Navigation type'>
             <select
               value={navType}
diff --git a/frontend/src/components/ElementSettings/NavigationSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/NavigationSettingsSectionCompact.tsx
index 89e6db8..55bcae5 100644
--- a/frontend/src/components/ElementSettings/NavigationSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/NavigationSettingsSectionCompact.tsx
@@ -13,6 +13,7 @@ import type {
   CanvasElementType,
 } from '../../types/constructor';
 import { addFallbackAssetOption } from '../../lib/constructorHelpers';
+import { FONT_OPTIONS } from '../../lib/fonts';
 
 type NavigationElementType = Extract<
   CanvasElementType,
@@ -23,6 +24,7 @@ interface NavigationSettingsSectionCompactProps {
   type: NavigationElementType;
   navType?: NavigationButtonKind;
   navLabel: string;
+  navLabelFontFamily: string;
   navDisabled: boolean;
   iconUrl: string;
   targetPageSlug: string;
@@ -58,6 +60,7 @@ const NavigationSettingsSectionCompact: React.FC<
   type,
   navType,
   navLabel,
+  navLabelFontFamily,
   navDisabled,
   iconUrl,
   targetPageSlug,
@@ -123,6 +126,24 @@ const NavigationSettingsSectionCompact: React.FC<
         />
       </div>
 
+      <div>
+        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+          Label font
+        </label>
+        <select
+          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+          value={navLabelFontFamily}
+          onChange={(event) => onChange('navLabelFontFamily', event.target.value)}
+        >
+          <option value=''>Not set</option>
+          {FONT_OPTIONS.map((font) => (
+            <option key={font.key} value={font.key}>
+              {font.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
       <div>
         <label className='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
           <input
diff --git a/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx b/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
index 89977bd..3497f94 100644
--- a/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
+++ b/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
@@ -71,7 +71,7 @@ const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
@@ -86,7 +86,7 @@ const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
           >
             <option value=''>Not set</option>
             {FONT_OPTIONS.map((font) => (
-              <option key={font.key} value={font.fontFamily}>
+              <option key={font.key} value={font.key}>
                 {font.label}
               </option>
             ))}
diff --git a/frontend/src/components/ElementSettings/TooltipSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/TooltipSettingsSectionCompact.tsx
index b27b470..6834494 100644
--- a/frontend/src/components/ElementSettings/TooltipSettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/TooltipSettingsSectionCompact.tsx
@@ -91,7 +91,7 @@ const TooltipSettingsSectionCompact: React.FC<
         >
           <option value=''>Not set</option>
           {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.fontFamily}>
+            <option key={font.key} value={font.key}>
               {font.label}
             </option>
           ))}
@@ -111,7 +111,7 @@ const TooltipSettingsSectionCompact: React.FC<
         >
           <option value=''>Not set</option>
           {FONT_OPTIONS.map((font) => (
-            <option key={font.key} value={font.fontFamily}>
+            <option key={font.key} value={font.key}>
               {font.label}
             </option>
           ))}
diff --git a/frontend/src/components/ElementSettings/types.ts b/frontend/src/components/ElementSettings/types.ts
index 012b9d7..7bbe732 100644
--- a/frontend/src/components/ElementSettings/types.ts
+++ b/frontend/src/components/ElementSettings/types.ts
@@ -83,6 +83,7 @@ export interface CommonSettingsSectionProps {
 export interface NavigationSettingsSectionProps {
   iconUrl: string;
   navLabel: string;
+  navLabelFontFamily: string;
   navType: 'forward' | 'back';
   navDisabled: boolean;
   targetPageId: string;
@@ -152,7 +153,7 @@ export interface MediaSettingsSectionProps {
 export interface GallerySettingsSectionProps {
   galleryCards: GalleryCard[];
   galleryTitleFontFamily: string;
-  galleryCardFontFamily: string;
+  galleryTextFontFamily: string;
   onAddCard: () => void;
   onRemoveCard: (cardId: string) => void;
   onUpdateCard: (
@@ -177,7 +178,7 @@ export interface GallerySettingsSectionCompactProps {
   galleryColumns: number;
   // Font settings
   galleryTitleFontFamily: string;
-  galleryCardFontFamily: string;
+  galleryTextFontFamily: string;
   // Cards
   galleryCards: GalleryCard[];
   imageAssetOptions: AssetOption[];
@@ -187,7 +188,7 @@ export interface GallerySettingsSectionCompactProps {
     galleryTitle?: string;
     galleryColumns?: number;
     galleryTitleFontFamily?: string;
-    galleryCardFontFamily?: string;
+    galleryTextFontFamily?: string;
   }) => void;
   // Info span handlers
   onAddInfoSpan: () => void;
diff --git a/frontend/src/components/ElementSettings/useElementSettingsForm.ts b/frontend/src/components/ElementSettings/useElementSettingsForm.ts
index f945827..941c055 100644
--- a/frontend/src/components/ElementSettings/useElementSettingsForm.ts
+++ b/frontend/src/components/ElementSettings/useElementSettingsForm.ts
@@ -91,6 +91,7 @@ interface FormState {
   // Navigation settings
   iconUrl: string;
   navLabel: string;
+  navLabelFontFamily: string;
   navType: 'forward' | 'back';
   navDisabled: boolean;
   targetPageId: string;
@@ -129,7 +130,7 @@ interface FormState {
 
   // Gallery settings
   galleryTitleFontFamily: string;
-  galleryCardFontFamily: string;
+  galleryTextFontFamily: string;
 
   // Complex arrays
   galleryCards: GalleryCard[];
@@ -186,6 +187,7 @@ const initialState: FormState = {
   activeBackgroundColor: '',
   iconUrl: '',
   navLabel: '',
+  navLabelFontFamily: '',
   navType: 'forward',
   navDisabled: false,
   targetPageId: '',
@@ -214,7 +216,7 @@ const initialState: FormState = {
   carouselNextIconUrl: '',
   carouselCaptionFontFamily: '',
   galleryTitleFontFamily: '',
-  galleryCardFontFamily: '',
+  galleryTextFontFamily: '',
   galleryCards: [],
   carouselSlides: [],
 };
@@ -295,6 +297,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
             : String(settings.appearDurationSec),
         iconUrl: String(settings.iconUrl || ''),
         navLabel: String(settings.navLabel || ''),
+        navLabelFontFamily: String(settings.navLabelFontFamily || ''),
         navType: settings.navType === 'back' ? 'back' : 'forward',
         navDisabled: Boolean(settings.navDisabled),
         targetPageId: String(settings.targetPageId || ''),
@@ -334,7 +337,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
         carouselNextIconUrl: String(settings.carouselNextIconUrl || ''),
         carouselCaptionFontFamily: String(settings.carouselCaptionFontFamily || ''),
         galleryTitleFontFamily: String(settings.galleryTitleFontFamily || ''),
-        galleryCardFontFamily: String(settings.galleryCardFontFamily || ''),
+        galleryTextFontFamily: String(settings.galleryTextFontFamily || ''),
         galleryCards: Array.isArray(settings.galleryCards)
           ? settings.galleryCards.map(
               (card: Record<string, unknown>, index: number) => ({
@@ -638,6 +641,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
     if (isNavigationType) {
       settings.iconUrl = state.iconUrl.trim();
       settings.navLabel = state.navLabel.trim();
+      settings.navLabelFontFamily = state.navLabelFontFamily.trim();
       settings.navType = state.navType;
       settings.navDisabled = state.navDisabled;
       settings.targetPageId = state.targetPageId.trim();
@@ -686,7 +690,7 @@ export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
         description: card.description,
       }));
       settings.galleryTitleFontFamily = state.galleryTitleFontFamily.trim();
-      settings.galleryCardFontFamily = state.galleryCardFontFamily.trim();
+      settings.galleryTextFontFamily = state.galleryTextFontFamily.trim();
     }
 
     // Carousel type settings
diff --git a/frontend/src/components/UiElements/elements/CarouselElement.tsx b/frontend/src/components/UiElements/elements/CarouselElement.tsx
index a3f5f07..a5bf34c 100644
--- a/frontend/src/components/UiElements/elements/CarouselElement.tsx
+++ b/frontend/src/components/UiElements/elements/CarouselElement.tsx
@@ -5,10 +5,11 @@
  * Renders with unified wrapper styling + content.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement, CarouselSlide } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { getFontByKey, getFontStyle } from '../../../lib/fonts';
 
 interface CarouselElementProps {
   element: CanvasElement;
@@ -27,6 +28,14 @@ const CarouselElement: React.FC<CarouselElementProps> = ({
   const slides: CarouselSlide[] = element.carouselSlides || [];
   const firstSlide = slides[0];
 
+  // Resolve font key to full CSS style (including fontStretch for condensed variants)
+  const captionFontStyle = useMemo(() => {
+    const fontKey = element.carouselCaptionFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.carouselCaptionFontFamily]);
+
   return (
     <div className={className} style={style}>
       <div className='relative w-full h-full min-w-[120px] min-h-[80px]'>
diff --git a/frontend/src/components/UiElements/elements/DescriptionElement.tsx b/frontend/src/components/UiElements/elements/DescriptionElement.tsx
index 4afc95c..9fff21f 100644
--- a/frontend/src/components/UiElements/elements/DescriptionElement.tsx
+++ b/frontend/src/components/UiElements/elements/DescriptionElement.tsx
@@ -5,10 +5,11 @@
  * Renders with unified wrapper styling + content.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { getFontByKey, getFontStyle } from '../../../lib/fonts';
 
 interface DescriptionElementProps {
   element: CanvasElement;
@@ -25,6 +26,21 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
 }) => {
   const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
 
+  // Resolve font keys to full CSS styles (including fontStretch for condensed variants)
+  const titleFontStyle = useMemo(() => {
+    const fontKey = element.descriptionTitleFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.descriptionTitleFontFamily]);
+
+  const textFontStyle = useMemo(() => {
+    const fontKey = element.descriptionTextFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.descriptionTextFontFamily]);
+
   // With icon: render image
   if (element.iconUrl) {
     const imgStyle: CSSProperties = {
@@ -56,8 +72,8 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
           className='font-bold'
           style={{
             fontSize: element.descriptionTitleFontSize || '24px',
-            fontFamily: element.descriptionTitleFontFamily || 'inherit',
             color: element.descriptionTitleColor || '#ffffff',
+            ...titleFontStyle,
           }}
         >
           {element.descriptionTitle || ''}
@@ -66,8 +82,8 @@ const DescriptionElement: React.FC<DescriptionElementProps> = ({
           <p
             style={{
               fontSize: element.descriptionTextFontSize || '16px',
-              fontFamily: element.descriptionTextFontFamily || 'inherit',
               color: element.descriptionTextColor || '#ffffff',
+              ...textFontStyle,
             }}
           >
             {element.descriptionText}
diff --git a/frontend/src/components/UiElements/elements/GalleryElement.tsx b/frontend/src/components/UiElements/elements/GalleryElement.tsx
index 170549e..b66ff8c 100644
--- a/frontend/src/components/UiElements/elements/GalleryElement.tsx
+++ b/frontend/src/components/UiElements/elements/GalleryElement.tsx
@@ -5,7 +5,7 @@
  * Renders with unified wrapper styling + content.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type {
   CanvasElement,
@@ -13,6 +13,7 @@ import type {
   GalleryInfoSpan,
 } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { getFontByKey, getFontStyle } from '../../../lib/fonts';
 
 interface GalleryElementProps {
   element: CanvasElement;
@@ -36,6 +37,21 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
   const title = element.galleryTitle;
   const columns = element.galleryColumns || 3;
 
+  // Resolve font keys to full CSS styles (including fontStretch for condensed variants)
+  const titleFontStyle = useMemo(() => {
+    const fontKey = element.galleryTitleFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.galleryTitleFontFamily]);
+
+  const textFontStyle = useMemo(() => {
+    const fontKey = element.galleryTextFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.galleryTextFontFamily]);
+
   return (
     <div className={className} style={style}>
       <div className='flex flex-col gap-2 p-3 bg-black/60 rounded-xl min-w-[200px] backdrop-blur-sm'>
@@ -52,7 +68,10 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
 
         {/* Title */}
         {title && (
-          <div className='bg-amber-50 text-slate-800 text-center py-2 px-3 rounded-lg font-semibold text-sm'>
+          <div
+            className='bg-amber-50 text-slate-800 text-center py-2 px-3 rounded-lg font-semibold text-sm'
+            style={titleFontStyle}
+          >
             {title}
           </div>
         )}
@@ -67,6 +86,7 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
               <div
                 key={span.id}
                 className='bg-slate-700 text-amber-50 text-center py-2 px-2 rounded-lg text-xs font-medium'
+                style={textFontStyle}
               >
                 {span.text}
               </div>
@@ -106,7 +126,10 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
                 )}
                 {card.title && (
                   <div className='absolute inset-0 flex items-center justify-center'>
-                    <span className='text-white text-xs font-bold drop-shadow-lg'>
+                    <span
+                      className='text-white text-xs font-bold drop-shadow-lg'
+                      style={textFontStyle}
+                    >
                       {card.title}
                     </span>
                   </div>
diff --git a/frontend/src/components/UiElements/elements/NavigationElement.tsx b/frontend/src/components/UiElements/elements/NavigationElement.tsx
index 3ed129e..6123aaf 100644
--- a/frontend/src/components/UiElements/elements/NavigationElement.tsx
+++ b/frontend/src/components/UiElements/elements/NavigationElement.tsx
@@ -5,10 +5,11 @@
  * Renders with unified wrapper styling + content.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { getFontByKey, getFontStyle } from '../../../lib/fonts';
 
 interface NavigationElementProps {
   element: CanvasElement;
@@ -25,6 +26,14 @@ const NavigationElement: React.FC<NavigationElementProps> = ({
 }) => {
   const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
 
+  // Resolve font key to full CSS style (including fontStretch for condensed variants)
+  const labelFontStyle = useMemo(() => {
+    const fontKey = element.navLabelFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.navLabelFontFamily]);
+
   // With icon: render image
   if (element.iconUrl) {
     const imgStyle: CSSProperties = {
@@ -49,7 +58,7 @@ const NavigationElement: React.FC<NavigationElementProps> = ({
   // Without icon: render text label
   return (
     <div className={className} style={style}>
-      <span className='px-4 py-2 text-sm'>
+      <span className='px-4 py-2 text-sm' style={labelFontStyle}>
         {element.navLabel ||
           (element.type === 'navigation_next' ? 'Next' : 'Back')}
       </span>
diff --git a/frontend/src/components/UiElements/elements/TooltipElement.tsx b/frontend/src/components/UiElements/elements/TooltipElement.tsx
index 501900d..4348891 100644
--- a/frontend/src/components/UiElements/elements/TooltipElement.tsx
+++ b/frontend/src/components/UiElements/elements/TooltipElement.tsx
@@ -5,10 +5,11 @@
  * Renders with unified wrapper styling + content.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { CSSProperties } from 'react';
 import type { CanvasElement } from '../../../types/constructor';
 import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
+import { getFontByKey, getFontStyle } from '../../../lib/fonts';
 
 interface TooltipElementProps {
   element: CanvasElement;
@@ -25,6 +26,21 @@ const TooltipElement: React.FC<TooltipElementProps> = ({
 }) => {
   const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
 
+  // Resolve font keys to full CSS styles (including fontStretch for condensed variants)
+  const titleFontStyle = useMemo(() => {
+    const fontKey = element.tooltipTitleFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.tooltipTitleFontFamily]);
+
+  const textFontStyle = useMemo(() => {
+    const fontKey = element.tooltipTextFontFamily;
+    if (!fontKey) return {};
+    const font = getFontByKey(fontKey);
+    return font ? getFontStyle(font) : { fontFamily: fontKey };
+  }, [element.tooltipTextFontFamily]);
+
   // With icon: render image
   if (element.iconUrl) {
     const imgStyle: CSSProperties = {
@@ -50,8 +66,12 @@ const TooltipElement: React.FC<TooltipElementProps> = ({
   return (
     <div className={className} style={style}>
       <div className='p-3 max-w-[200px]'>
-        <p className='font-bold text-sm'>{element.tooltipTitle}</p>
-        <p className='text-xs opacity-70'>{element.tooltipText}</p>
+        <p className='font-bold text-sm' style={titleFontStyle}>
+          {element.tooltipTitle}
+        </p>
+        <p className='text-xs opacity-70' style={textFontStyle}>
+          {element.tooltipText}
+        </p>
       </div>
     </div>
   );
diff --git a/frontend/src/lib/elementDefaults.ts b/frontend/src/lib/elementDefaults.ts
index ee53ebf..7973047 100644
--- a/frontend/src/lib/elementDefaults.ts
+++ b/frontend/src/lib/elementDefaults.ts
@@ -538,8 +538,8 @@ export const buildElementSettings = (
     );
     addIfNotEmpty(
       settings,
-      'galleryCardFontFamily',
-      element.galleryCardFontFamily,
+      'galleryTextFontFamily',
+      element.galleryTextFontFamily,
     );
   }
 
diff --git a/frontend/src/pages/element-type-defaults/[id].tsx b/frontend/src/pages/element-type-defaults/[id].tsx
index 8ce10fc..3c11118 100644
--- a/frontend/src/pages/element-type-defaults/[id].tsx
+++ b/frontend/src/pages/element-type-defaults/[id].tsx
@@ -297,6 +297,7 @@ const ElementTypeDefaultDetailsPage = () => {
                     <NavigationSettingsSection
                       iconUrl={form.state.iconUrl}
                       navLabel={form.state.navLabel}
+                      navLabelFontFamily={form.state.navLabelFontFamily}
                       navType={form.state.navType}
                       navDisabled={form.state.navDisabled}
                       targetPageId={form.state.targetPageId}
@@ -352,7 +353,7 @@ const ElementTypeDefaultDetailsPage = () => {
                     <GallerySettingsSection
                       galleryCards={form.state.galleryCards}
                       galleryTitleFontFamily={form.state.galleryTitleFontFamily}
-                      galleryCardFontFamily={form.state.galleryCardFontFamily}
+                      galleryTextFontFamily={form.state.galleryTextFontFamily}
                       onAddCard={form.addGalleryCard}
                       onRemoveCard={form.removeGalleryCard}
                       onUpdateCard={form.updateGalleryCard}
diff --git a/frontend/src/pages/project-element-defaults/[id].tsx b/frontend/src/pages/project-element-defaults/[id].tsx
index 9b685a1..0026fd1 100644
--- a/frontend/src/pages/project-element-defaults/[id].tsx
+++ b/frontend/src/pages/project-element-defaults/[id].tsx
@@ -483,6 +483,7 @@ const ProjectElementDefaultDetailsPage = () => {
                   <NavigationSettingsSection
                     iconUrl={form.state.iconUrl}
                     navLabel={form.state.navLabel}
+                    navLabelFontFamily={form.state.navLabelFontFamily}
                     navType={form.state.navType}
                     navDisabled={form.state.navDisabled}
                     targetPageId={form.state.targetPageId}
@@ -537,7 +538,7 @@ const ProjectElementDefaultDetailsPage = () => {
                   <GallerySettingsSection
                     galleryCards={form.state.galleryCards}
                     galleryTitleFontFamily={form.state.galleryTitleFontFamily}
-                    galleryCardFontFamily={form.state.galleryCardFontFamily}
+                    galleryTextFontFamily={form.state.galleryTextFontFamily}
                     onAddCard={form.addGalleryCard}
                     onRemoveCard={form.removeGalleryCard}
                     onUpdateCard={form.updateGalleryCard}
diff --git a/frontend/src/types/constructor.ts b/frontend/src/types/constructor.ts
index 5b02245..30eb017 100644
--- a/frontend/src/types/constructor.ts
+++ b/frontend/src/types/constructor.ts
@@ -98,7 +98,7 @@ export interface CanvasElement extends BaseCanvasElement {
   galleryInfoSpans?: GalleryInfoSpan[];
   galleryColumns?: number;
   galleryTitleFontFamily?: string;
-  galleryCardFontFamily?: string;
+  galleryTextFontFamily?: string;
   carouselSlides?: CarouselSlide[];
   carouselCaptionFontFamily?: string;
   carouselPrevIconUrl?: string;
@@ -117,6 +117,7 @@ export interface CanvasElement extends BaseCanvasElement {
   descriptionTextColor?: string;
   descriptionBackgroundColor?: string;
   navLabel?: string;
+  navLabelFontFamily?: string;
   navType?: NavigationButtonKind;
   navDisabled?: boolean;
   /** @deprecated Use targetPageSlug instead - IDs change when copied between environments */