diff --git a/src/constants.ts b/src/constants.ts
index 34b7a8bad..37552bb18 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -80,3 +80,15 @@ export const PERSISTENCE_RESERVED_PROPERTIES = [
     INITIAL_REFERRER_INFO,
     ENABLE_PERSON_PROCESSING,
 ]
+
+export const WEB_SAFE_FONTS = [
+    'system-ui',
+    'Arial',
+    'Verdana',
+    'Tahoma',
+    'Trebuchet MS',
+    'Helvetica',
+    'Times New Roman',
+    'Georgia',
+    'Courier New',
+] as const
diff --git a/src/extensions/surveys/surveys-utils.tsx b/src/extensions/surveys/surveys-utils.tsx
index 230651ab1..ad7c25511 100644
--- a/src/extensions/surveys/surveys-utils.tsx
+++ b/src/extensions/surveys/surveys-utils.tsx
@@ -1,7 +1,7 @@
-import { PostHog } from '../../posthog-core'
-import { Survey, SurveyAppearance, MultipleSurveyQuestion, SurveyQuestion } from '../../posthog-surveys-types'
-import { window as _window, document as _document } from '../../utils/globals'
 import { VNode, cloneElement, createContext } from 'preact'
+import { PostHog } from '../../posthog-core'
+import { MultipleSurveyQuestion, Survey, SurveyAppearance, SurveyQuestion } from '../../posthog-surveys-types'
+import { document as _document, window as _window } from '../../utils/globals'
 // We cast the types here which is dangerous but protected by the top level generateSurveys call
 const window = _window as Window & typeof globalThis
 const document = _document as Document
@@ -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%;
@@ -36,7 +36,7 @@ export const style = (appearance: SurveyAppearance | null) => {
               border-top-right-radius: 10px;
               box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);
           }
-          
+
           .survey-box, .thank-you-message-container {
               padding: 20px 25px 10px;
               display: flex;
@@ -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..4d662de9c 100644
--- a/src/posthog-surveys-types.ts
+++ b/src/posthog-surveys-types.ts
@@ -4,6 +4,8 @@
  * See https://github.com/PostHog/posthog-js/issues/698
  */
 
+import { WEB_SAFE_FONTS } from './constants'
+
 export interface SurveyAppearance {
     // keep in sync with frontend/src/types.ts -> SurveyAppearance
     backgroundColor?: string
@@ -34,6 +36,7 @@ export interface SurveyAppearance {
     widgetSelector?: string
     widgetLabel?: string
     widgetColor?: string
+    fontFamily?: (typeof WEB_SAFE_FONTS)[number]
     // questionable: Not in frontend/src/types.ts -> SurveyAppearance, but used in site app
     maxWidth?: string
     zIndex?: string