fix theme preview fonts

components/ThemeManager/PubThemeSetter.tsx

···
     <BaseThemeProvider
       local
       {...localPubTheme}
+      headingFontId={headingFont}
+      bodyFontId={bodyFont}
       hasBackgroundImage={!!image}
       className="min-h-0!"
     >
···
       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))"
···
             />
           )}
 
-          <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">
···
         </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>
···
       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))"
···
         }}
       >
         <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">

components/ThemeManager/ThemeSetter.tsx

···
 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"
···
   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) => {
···
               }
         }
       />
-      <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>