a tool for shared writing and social publishing
fix theme preview fonts
Jared Pereira
(Mar 7, 2026, 5:49 PM EST)
ea912e79
1e27523c
+18
-8
+8
-6
components/ThemeManager/PubThemeSetter.tsx
+8
-6
components/ThemeManager/PubThemeSetter.tsx
···
71
71
<BaseThemeProvider
72
72
local
73
73
{...localPubTheme}
74
+
headingFontId={headingFont}
75
+
bodyFontId={bodyFont}
74
76
hasBackgroundImage={!!image}
75
77
className="min-h-0!"
76
78
>
···
288
290
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 `}
289
291
>
290
292
<div
291
-
className="sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto"
293
+
className="pubWrapper sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto"
292
294
style={{
293
295
background: props.showPageBackground
294
296
? "rgba(var(--bg-page), var(--bg-page-alpha))"
···
308
310
/>
309
311
)}
310
312
311
-
<div className="text-[11px] font-bold pt-[5px] text-accent-contrast">
313
+
<div className="text-[11px] font-bold pt-[5px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
312
314
{record?.name}
313
315
</div>
314
316
<div className="text-[7px] font-normal text-tertiary">
···
321
323
</div>
322
324
323
325
<div className="flex flex-col text-[8px] rounded-md ">
324
-
<div className="font-bold">A Sample Post</div>
326
+
<div className="font-bold" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>A Sample Post</div>
325
327
<div className="text-secondary italic text-[6px]">
326
328
This is a sample description about the sample post
327
329
</div>
···
355
357
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`}
356
358
>
357
359
<div
358
-
className="sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto"
360
+
className="pubWrapper sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto"
359
361
style={{
360
362
background: props.showPageBackground
361
363
? "rgba(var(--bg-page), var(--bg-page-alpha))"
···
363
365
}}
364
366
>
365
367
<div className="flex flex-col ">
366
-
<div className="text-[6px] font-bold pt-[6px] text-accent-contrast">
368
+
<div className="text-[6px] font-bold pt-[6px] text-accent-contrast" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
367
369
{record?.name}
368
370
</div>
369
-
<div className="text-[11px] font-bold text-primary">
371
+
<div className="text-[11px] font-bold text-primary" style={{ fontFamily: "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))" }}>
370
372
A Sample Post
371
373
</div>
372
374
<div className="text-[7px] font-normal text-secondary italic">
+10
-2
components/ThemeManager/ThemeSetter.tsx
+10
-2
components/ThemeManager/ThemeSetter.tsx
···
22
22
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
23
23
import { useIsMobile } from "src/hooks/isMobile";
24
24
import { Toggle } from "components/Toggle";
25
+
import { getFontConfig, getFontFamilyValue } from "src/fonts";
25
26
26
27
export type pickers =
27
28
| "null"
···
258
259
let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden")
259
260
?.data.value;
260
261
262
+
// Read font values directly since the popover is portalled outside .leafletWrapper
263
+
let headingFontId = useEntity(props.entityID, "theme/heading-font")?.data.value;
264
+
let bodyFontId = useEntity(props.entityID, "theme/body-font")?.data.value;
265
+
let bodyFontFamily = getFontFamilyValue(getFontConfig(bodyFontId));
266
+
let headingFontFamily = getFontFamilyValue(getFontConfig(headingFontId));
267
+
261
268
return (
262
269
<div
263
270
onClick={(e) => {
···
297
304
}
298
305
}
299
306
/>
300
-
<div className="z-10 relative">
307
+
<div className="z-10 relative" style={{ fontFamily: bodyFontFamily }}>
301
308
<p
302
309
onClick={() => {
303
310
props.setOpenPicker("text");
304
311
}}
305
-
className="cursor-pointer font-bold w-fit [font-family:var(--theme-heading-font)]"
312
+
className="cursor-pointer font-bold w-fit"
313
+
style={{ fontFamily: headingFontFamily }}
306
314
>
307
315
Hello!
308
316
</p>