diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 60dce6edd..1f79d1e6d 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,7 +1,7 @@
 import { i18n } from "../i18n"
 import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
 import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
-import { googleFontHref } from "../util/theme"
+import { googleFontHref, googleSubFontHref } from "../util/theme"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { unescapeHTML } from "../util/escape"
 import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
@@ -45,6 +45,7 @@ export default (() => {
             <link rel="preconnect" href="https://fonts.googleapis.com" />
             <link rel="preconnect" href="https://fonts.gstatic.com" />
             <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
+            <link rel="stylesheet" href={googleSubFontHref(cfg.theme, cfg.pageTitle)} />
           </>
         )}
         <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossOrigin="anonymous" />
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index fe855ba20..84d506b5e 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -9,7 +9,7 @@ import styles from "../../styles/custom.scss"
 import popoverStyle from "../../components/styles/popover.scss"
 import { BuildCtx } from "../../util/ctx"
 import { QuartzComponent } from "../../components/types"
-import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
+import { googleFontHref, googleSubFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
 import { Features, transform } from "lightningcss"
 import { transform as transpile } from "esbuild"
 import { write } from "./helpers"
@@ -215,8 +215,13 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
         // let the user do it themselves in css
       } else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
         // when cdnCaching is true, we link to google fonts in Head.tsx
-        const response = await fetch(googleFontHref(ctx.cfg.configuration.theme))
-        googleFontsStyleSheet = await response.text()
+        const googleFontsResponse = await fetch(googleFontHref(ctx.cfg.configuration.theme))
+        googleFontsStyleSheet = await googleFontsResponse.text()
+
+        const googleSubFontsResponse = await fetch(googleSubFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle))
+        const googleSubFontsStyleSheet = await googleSubFontsResponse.text()
+        
+        googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleSubFontsStyleSheet}`;
 
         if (!cfg.baseUrl) {
           throw new Error(
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 14262e3e4..c0ed417e5 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -91,6 +91,13 @@ export function googleFontHref(theme: Theme) {
   return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
 }
 
+export function googleSubFontHref(theme: Theme, text: string): string {
+  const { title } = theme.typography;
+  const titleFont = formatFontSpecification("title", title);
+
+  return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`;
+}
+
 export interface GoogleFontFile {
   url: string
   filename: string