diff --git a/app/globals.css b/app/globals.css
index b96ab4c9..a8a44a15 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -205,6 +205,7 @@
   /* Scope custom fonts to document content only (not sidebar/UI chrome) */
   .pageScrollWrapper {
     font-family: var(--theme-font, var(--font-quattro));
+    font-size: var(--theme-font-base-size, 16px);
   }
 
   .pageScrollWrapper h1,
@@ -214,6 +215,18 @@
     font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
   }
 
+  /* Scale heading sizes relative to the custom base font size */
+  .pageScrollWrapper h1 { font-size: 2em; }
+  .pageScrollWrapper h2 { font-size: 1.625em; }
+  .pageScrollWrapper h3 { font-size: 1.125em; }
+  .pageScrollWrapper h4 { font-size: 1em; }
+
+  /* Scale text size classes relative to the custom base font size.
+     Tailwind's text-sm/text-base/text-lg compile to fixed rem values
+     which ignore the custom base size set on .pageScrollWrapper. */
+  .pageScrollWrapper .textSizeSmall { font-size: 0.875em; }
+  .pageScrollWrapper .textSizeLarge { font-size: 1.125em; }
+
   .pageScrollWrapper pre {
     font-family: var(--theme-font, var(--font-quattro));
   }
diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
index 938ec530..964cb6ed 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/PublishedPageBlock.tsx
@@ -111,7 +111,7 @@ export function DocLinkBlock(props: {
             <div className="grow">
               {title && (
                 <div
-                  className={`pageBlockOne outline-none resize-none align-top gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold text-base" : ""}`}
+                  className={`pageBlockOne outline-none resize-none align-top gap-2 ${title.$type === "pub.leaflet.blocks.header" ? "font-bold" : ""}`}
                 >
                   <TextBlock
                     facets={title.facets}
diff --git a/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx b/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
index a2cdf6ce..571f35e5 100644
--- a/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
@@ -18,6 +18,7 @@ import { fetchPollData } from "./fetchPollData";
 import { getDocumentPages, hasLeafletContent } from "src/utils/normalizeRecords";
 import { DocumentProvider } from "contexts/DocumentContext";
 import { LeafletContentProvider } from "contexts/LeafletContentContext";
+import { FontLoader } from "components/FontLoader";
 
 export async function DocumentPageRenderer({
   did,
@@ -118,6 +119,7 @@ export async function DocumentPageRenderer({
   return (
     <DocumentProvider value={document}>
       <LeafletContentProvider value={{ pages }}>
+        <FontLoader headingFontId={document.theme?.headingFont} bodyFontId={document.theme?.bodyFont} />
         <PublicationThemeProvider theme={document.theme} pub_creator={pub_creator} isStandalone={isStandalone}>
           <PublicationBackgroundProvider theme={document.theme} pub_creator={pub_creator}>
             <LeafletLayout>
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 16cf239d..76e58acc 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -263,7 +263,7 @@ export let Block = ({
           <div className="pt-2 pb-2 px-3 grow min-w-0">
             <div className="flex flex-col w-full min-w-0 h-full grow ">
               <div
-                className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
+                className={`linkBlockTitle bg-transparent -mb-0.5  border-none font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
                 style={{
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -364,36 +364,36 @@ export let Block = ({
     case PubLeafletBlocksHeader.isMain(b.block): {
       if (b.block.level === 1)
         return (
-          <h2 style={{ fontSize: blockTextSize.h1 }} className={`h1Block ${className}`} {...blockProps}>
+          <h1 style={{ fontSize: blockTextSize.h1 }} className={`h1Block ${className}`} {...blockProps}>
             <TextBlock
               {...b.block}
               index={index}
               preview={preview}
               pageId={pageId}
             />
-          </h2>
+          </h1>
         );
       if (b.block.level === 2)
         return (
-          <h3 style={{ fontSize: blockTextSize.h2 }} className={`h2Block ${className}`} {...blockProps}>
+          <h2 style={{ fontSize: blockTextSize.h2 }} className={`h2Block ${className}`} {...blockProps}>
             <TextBlock
               {...b.block}
               index={index}
               preview={preview}
               pageId={pageId}
             />
-          </h3>
+          </h2>
         );
       if (b.block.level === 3)
         return (
-          <h4 style={{ fontSize: blockTextSize.h3 }} className={`h3Block ${className}`} {...blockProps}>
+          <h3 style={{ fontSize: blockTextSize.h3 }} className={`h3Block ${className}`} {...blockProps}>
             <TextBlock
               {...b.block}
               index={index}
               preview={preview}
               pageId={pageId}
             />
-          </h4>
+          </h3>
         );
       // if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
       // if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
diff --git a/components/Blocks/ExternalLinkBlock.tsx b/components/Blocks/ExternalLinkBlock.tsx
index 33eb17ac..ea9d8670 100644
--- a/components/Blocks/ExternalLinkBlock.tsx
+++ b/components/Blocks/ExternalLinkBlock.tsx
@@ -78,7 +78,7 @@ export const ExternalLinkBlock = (
         <div className="pt-2 pb-2 px-3 grow min-w-0">
           <div className="flex flex-col w-full min-w-0 h-full grow ">
             <div
-              className={`linkBlockTitle bg-transparent -mb-0.5  border-none text-base font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
+              className={`linkBlockTitle bg-transparent -mb-0.5  border-none font-bold outline-hidden resize-none align-top border h-[24px] line-clamp-1`}
               style={{
                 overflow: "hidden",
                 textOverflow: "ellipsis",
diff --git a/components/Blocks/PageLinkBlock.tsx b/components/Blocks/PageLinkBlock.tsx
index df27bd24..d255e0be 100644
--- a/components/Blocks/PageLinkBlock.tsx
+++ b/components/Blocks/PageLinkBlock.tsx
@@ -88,7 +88,7 @@ export function DocLinkBlock(props: BlockProps & { preview?: boolean }) {
           <div className="my-2 ml-3 grow min-w-0 text-sm bg-transparent overflow-clip ">
             {leafletMetadata[0] && (
               <div
-                className={`pageBlockOne outline-hidden resize-none align-top flex gap-2 ${leafletMetadata[0].type === "heading" ? "font-bold text-base" : ""}`}
+                className={`pageBlockOne outline-hidden resize-none align-top flex gap-2 ${leafletMetadata[0].type === "heading" ? "font-bold" : ""}`}
               >
                 {leafletMetadata[0].listData && (
                   <ListMarker
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index 08b1609c..9e79b101 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -138,9 +138,9 @@ export function RenderedTextBlock(props: {
   }[alignment];
   let textStyle =
     textSize?.data.value === "small"
-      ? "text-sm"
+      ? "textSizeSmall"
       : textSize?.data.value === "large"
-        ? "text-lg"
+        ? "textSizeLarge"
         : "";
   let { permissions } = useEntitySetContext();
 
@@ -204,10 +204,10 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
   }[alignment];
   let textStyle =
     textSize?.data.value === "small"
-      ? "text-sm text-secondary"
+      ? "textSizeSmall text-secondary"
       : textSize?.data.value === "large"
-        ? "text-lg text-primary"
-        : "text-base text-primary";
+        ? "textSizeLarge text-primary"
+        : "text-primary";
 
   let editorState = useEditorStates(
     (s) => s.editorStates[props.entityID],
diff --git a/components/FontLoader.tsx b/components/FontLoader.tsx
index 00e1f1bb..3de78a07 100644
--- a/components/FontLoader.tsx
+++ b/components/FontLoader.tsx
@@ -10,6 +10,7 @@ import {
   getFontPreloadLinks,
   getGoogleFontsUrl,
   getFontFamilyValue,
+  getFontBaseSize,
 } from "src/fonts";
 
 type FontLoaderProps = {
@@ -53,12 +54,14 @@ export function FontLoader({ headingFontId, bodyFontId }: FontLoaderProps) {
 
   const headingFontValue = getFontFamilyValue(headingFont);
   const bodyFontValue = getFontFamilyValue(bodyFont);
+  const bodyFontBaseSize = getFontBaseSize(bodyFont);
 
   // Set font CSS variables scoped to .leafletWrapper so they don't affect app UI
   const fontVariableCSS = `
 .leafletWrapper {
   --theme-heading-font: ${headingFontValue};
   --theme-font: ${bodyFontValue};
+  --theme-font-base-size: ${bodyFontBaseSize}px;
 }
 `.trim();
 
diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx
index 71bb8173..aa6ba027 100644
--- a/components/ThemeManager/PublicationThemeProvider.tsx
+++ b/components/ThemeManager/PublicationThemeProvider.tsx
@@ -141,6 +141,9 @@ export const usePubTheme = (
   let highlight2 = useColorAttribute(null, "theme/highlight-2");
   let highlight3 = useColorAttribute(null, "theme/highlight-3");
 
+  let headingFontId = theme?.headingFont;
+  let bodyFontId = theme?.bodyFont;
+
   return {
     bgLeaflet,
     bgPage,
@@ -152,6 +155,8 @@ export const usePubTheme = (
     highlight3,
     showPageBackground,
     pageWidth,
+    headingFontId,
+    bodyFontId,
   };
 };
 
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
index 55b28751..a133c8f5 100644
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -22,7 +22,7 @@ import {
   PublicationThemeProvider,
 } from "./PublicationThemeProvider";
 import { getColorDifference } from "./themeUtils";
-import { getFontConfig, getGoogleFontsUrl, getFontFamilyValue, generateFontFaceCSS } from "src/fonts";
+import { getFontConfig, getGoogleFontsUrl, getFontFamilyValue, generateFontFaceCSS, getFontBaseSize } from "src/fonts";
 
 // define a function to set an Aria Color to a CSS Variable in RGB
 function setCSSVariableToColor(
@@ -186,6 +186,7 @@ export const BaseThemeProvider = ({
   const bodyFontConfig = getFontConfig(bodyFontId);
   const headingFontValue = getFontFamilyValue(headingFontConfig);
   const bodyFontValue = getFontFamilyValue(bodyFontConfig);
+  const bodyFontBaseSize = getFontBaseSize(bodyFontConfig);
   const headingGoogleFontsUrl = getGoogleFontsUrl(headingFontConfig);
   const bodyGoogleFontsUrl = getGoogleFontsUrl(bodyFontConfig);
 
@@ -313,6 +314,7 @@ export const BaseThemeProvider = ({
           "--page-width-units": `min(${pageWidth || 624}px, calc(100vw - 12px))`,
           "--theme-heading-font": headingFontValue,
           "--theme-font": bodyFontValue,
+          "--theme-font-base-size": `${bodyFontBaseSize}px`,
         } as CSSProperties
       }
     >
diff --git a/src/fonts.ts b/src/fonts.ts
index 694f22a0..5e9eed24 100644
--- a/src/fonts.ts
+++ b/src/fonts.ts
@@ -113,6 +113,7 @@ export const fonts: Record<string, FontConfig> = {
 };
 
 export const defaultFontId = "quattro";
+export const defaultBaseSize = 16;
 
 // Parse a Google Fonts URL or string to extract the font name and family parameter
 // Supports various formats:
@@ -237,6 +238,11 @@ export function getGoogleFontsUrl(font: FontConfig): string | null {
   return `https://fonts.googleapis.com/css2?family=${font.googleFontsFamily}&display=swap`;
 }
 
+// Get the base font size for a font config
+export function getFontBaseSize(font: FontConfig): number {
+  return font.baseSize ?? defaultBaseSize;
+}
+
 // Get the CSS font-family value with fallbacks
 export function getFontFamilyValue(font: FontConfig): string {
   const family = font.fontFamily.includes(" ")