From ea912e793955ab9347ef57ff5eaf5c5b331d35e9 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Sat, 7 Mar 2026 17:49:38 -0500
Subject: [PATCH] fix theme preview fonts

---
 components/ThemeManager/PubThemeSetter.tsx | 14 ++++++++------
 components/ThemeManager/ThemeSetter.tsx    | 12 ++++++++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index f27ab421..7b0d575b 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -71,6 +71,8 @@ export const PubThemeSetter = (props: {
     <BaseThemeProvider
       local
       {...localPubTheme}
+      headingFontId={headingFont}
+      bodyFontId={bodyFont}
       hasBackgroundImage={!!image}
       className="min-h-0!"
     >
@@ -288,7 +290,7 @@ const SamplePub = (props: {
       className={`bg-bg-leaflet p-3 pb-0 flex flex-col gap-3 rounded-t-md  border border-border border-b-0 h-[148px] overflow-hidden `}
     >
       <div
-        className="sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto"
+        className="pubWrapper sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto"
         style={{
           background: props.showPageBackground
             ? "rgba(var(--bg-page), var(--bg-page-alpha))"
@@ -308,7 +310,7 @@ const SamplePub = (props: {
             />
           )}
 
-          <div className="text-[11px] font-bold pt-[5px] text-accent-contrast">
+          <div className="text-[11px] font-bold pt-[5px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
             {record?.name}
           </div>
           <div className="text-[7px] font-normal text-tertiary">
@@ -321,7 +323,7 @@ const SamplePub = (props: {
         </div>
 
         <div className="flex flex-col text-[8px]  rounded-md ">
-          <div className="font-bold">A Sample Post</div>
+          <div className="font-bold" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>A Sample Post</div>
           <div className="text-secondary italic text-[6px]">
             This is a sample description about the sample post
           </div>
@@ -355,7 +357,7 @@ const SamplePost = (props: {
       className={`bg-bg-leaflet p-3 max-w-full flex flex-col gap-3 rounded-t-md  border border-border border-b-0 pb-0 h-[148px] overflow-hidden`}
     >
       <div
-        className="sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto"
+        className="pubWrapper sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto"
         style={{
           background: props.showPageBackground
             ? "rgba(var(--bg-page), var(--bg-page-alpha))"
@@ -363,10 +365,10 @@ const SamplePost = (props: {
         }}
       >
         <div className="flex flex-col ">
-          <div className="text-[6px] font-bold pt-[6px] text-accent-contrast">
+          <div className="text-[6px] font-bold pt-[6px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
             {record?.name}
           </div>
-          <div className="text-[11px] font-bold text-primary">
+          <div className="text-[11px] font-bold text-primary" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
             A Sample Post
           </div>
           <div className="text-[7px] font-normal text-secondary italic">
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index ebaae995..6895d4ef 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -22,6 +22,7 @@ import { AccentPickers } from "./Pickers/AccentPickers";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useIsMobile } from "src/hooks/isMobile";
 import { Toggle } from "components/Toggle";
+import { getFontConfig, getFontFamilyValue } from "src/fonts";
 
 export type pickers =
   | "null"
@@ -258,6 +259,12 @@ const SamplePage = (props: {
   let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden")
     ?.data.value;
 
+  // Read font values directly since the popover is portalled outside .leafletWrapper
+  let headingFontId = useEntity(props.entityID, "theme/heading-font")?.data.value;
+  let bodyFontId = useEntity(props.entityID, "theme/body-font")?.data.value;
+  let bodyFontFamily = getFontFamilyValue(getFontConfig(bodyFontId));
+  let headingFontFamily = getFontFamilyValue(getFontConfig(headingFontId));
+
   return (
     <div
       onClick={(e) => {
@@ -297,12 +304,13 @@ const SamplePage = (props: {
               }
         }
       />
-      <div className="z-10 relative">
+      <div className="z-10 relative" style={{ fontFamily: bodyFontFamily }}>
         <p
           onClick={() => {
             props.setOpenPicker("text");
           }}
-          className="cursor-pointer font-bold w-fit [font-family:var(--theme-heading-font)]"
+          className="cursor-pointer font-bold w-fit"
+          style={{ fontFamily: headingFontFamily }}
         >
           Hello!
         </p>
-- 
2.51.2