diff --git a/app/globals.css b/app/globals.css
index d5947283..ae8c98f1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -230,6 +230,18 @@
   .pageScrollWrapper pre {
     font-family: var(--theme-font, var(--font-quattro));
   }
+
+  /* Apply custom fonts to publication homepage */
+  .pubWrapper {
+    font-family: var(--theme-font, var(--font-quattro));
+  }
+
+  .pubWrapper h1,
+  .pubWrapper h2,
+  .pubWrapper h3,
+  .pubWrapper h4 {
+    font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
+  }
   /*END FONT STYLING*/
 
   /* START GLOBAL STYLING */
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 2655c472..9902d594 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -21,6 +21,7 @@ import {
   normalizeDocumentRecord,
 } from "src/utils/normalizeRecords";
 import { getFirstParagraph } from "src/utils/getFirstParagraph";
+import { FontLoader } from "components/FontLoader";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -59,6 +60,8 @@ export default async function Publication(props: {
   if (!publication) return <PubNotFound />;
   try {
     return (
+      <>
+      <FontLoader headingFontId={record?.theme?.headingFont} bodyFontId={record?.theme?.bodyFont} />
       <PublicationThemeProvider
         theme={record?.theme}
         pub_creator={publication.identity_did}
@@ -193,6 +196,7 @@ export default async function Publication(props: {
           </PublicationHomeLayout>
         </PublicationBackgroundProvider>
       </PublicationThemeProvider>
+      </>
     );
   } catch (e) {
     console.log(e);