diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx index d4f992678..6481df77b 100644 --- a/src/extensions/surveys/surveys-utils.tsx +++ b/src/extensions/surveys/surveys-utils.tsx @@ -22,7 +22,7 @@ export const style = (appearance: SurveyAppearance | null) => { bottom: 0px; color: black; font-weight: normal; - font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: ${appearance?.fontFamily || '-apple-system'}, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; text-align: left; max-width: ${parseInt(appearance?.maxWidth || '300')}px; width: 100%; @@ -56,7 +56,7 @@ export const style = (appearance: SurveyAppearance | null) => { .survey-form textarea { color: #2d2d2d; font-size: 14px; - font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: ${appearance?.fontFamily || '-apple-system'}, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: white; color: black; outline: none; diff --git a/src/posthog-surveys-types.ts b/src/posthog-surveys-types.ts index 09aea91ce..3dee01a6d 100644 --- a/src/posthog-surveys-types.ts +++ b/src/posthog-surveys-types.ts @@ -34,6 +34,7 @@ export interface SurveyAppearance { widgetSelector?: string widgetLabel?: string widgetColor?: string + fontFamily?: string // questionable: Not in frontend/src/types.ts -> SurveyAppearance, but used in site app maxWidth?: string zIndex?: string