chore: add inherit option for survery font customization

PostHog · Feb 25, 2025 · e0829e9 · e0829e9
1 parent 75274e5
commit e0829e9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/frontend/src/scenes/surveys/SurveyCustomization.tsx b/frontend/src/scenes/surveys/SurveyCustomization.tsx
@@ -192,18 +192,23 @@ export function Customization({
                     </LemonField.Pure>
                 )}
                 {isCustomFontsEnabled && (
-                    <LemonField.Pure className="mt-2" label="Font family">
+                    <LemonField.Pure
+                        className="mt-2"
+                        label="Font family"
+                        // TODO: Update this info when we have a version of posthog-js that supports this
+                        info="Showing a survey all the time requires at least version [XXX] of posthog-js"
+                    >
                         <LemonSelect
                             value={appearance?.fontFamily}
                             onChange={(fontFamily) => onAppearanceChange({ ...appearance, fontFamily })}
                             options={WEB_SAFE_FONTS.map((font) => {
                                 return {
                                     label: (
-                                        <span className={font.toLowerCase().replace(/\s/g, '-')}>
-                                            {font} {font === 'system-ui' ? '(default)' : ''}
+                                        <span className={font.value.toLowerCase().replace(/\s/g, '-')}>
+                                            {font.label}
                                         </span>
                                     ),
-                                    value: font,
+                                    value: font.value,
                                 }
                             })}
                             className="ignore-error-border"

diff --git a/frontend/src/scenes/surveys/constants.tsx b/frontend/src/scenes/surveys/constants.tsx
@@ -313,13 +313,14 @@ export const defaultSurveyTemplates = [
 ]
 
 export const WEB_SAFE_FONTS = [
-    'system-ui',
-    'Arial',
-    'Verdana',
-    'Tahoma',
-    'Trebuchet MS',
-    'Helvetica',
-    'Times New Roman',
-    'Georgia',
-    'Courier New',
+    { value: 'system-ui', label: 'system-ui (default)' },
+    { value: 'inherit', label: 'inherit (uses the font family of your website)' },
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Verdana', label: 'Verdana' },
+    { value: 'Tahoma', label: 'Tahoma' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
+    { value: 'Helvetica', label: 'Helvetica' },
+    { value: 'Times New Roman', label: 'Times New Roman' },
+    { value: 'Georgia', label: 'Georgia' },
+    { value: 'Courier New', label: 'Courier New' },
 ] as const
diff --git a/frontend/src/styles/base.scss b/frontend/src/styles/base.scss
@@ -1454,6 +1454,10 @@ img {
     font-family: system-ui;
 }
 
+.inherit {
+    font-family: inherit;
+}
+
 // Highlight background blink
 
 /* stylelint-disable-next-line keyframes-name-pattern */

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -2879,7 +2879,7 @@ export interface SurveyAppearance {
     widgetSelector?: string
     widgetLabel?: string
     widgetColor?: string
-    fontFamily?: (typeof WEB_SAFE_FONTS)[number]
+    fontFamily?: (typeof WEB_SAFE_FONTS)[number]['value']
 }
 
 export interface SurveyQuestionBase {