From fdae3df3954d52bd3c45fe754bc083ff4e1bfb82 Mon Sep 17 00:00:00 2001
From: Lucas Faria <lucasheriques@gmail.com>
Date: Tue, 7 Jan 2025 11:23:32 -0300
Subject: [PATCH] feat: custom webfont selection on surveys

---
 src/extensions/surveys/surveys-utils.tsx | 12 ++++++------
 src/posthog-surveys-types.ts             |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

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..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