From a35f6e2399761008e7a3670f7cfaf31eeb69b641 Mon Sep 17 00:00:00 2001
From: Felix Nie <hongtuo.nie@u.nus.edu>
Date: Mon, 17 Mar 2025 12:36:26 +0800
Subject: [PATCH] Made googleFontHref return array of URLs

---
 quartz/components/Head.tsx                    |  8 ++++---
 quartz/plugins/emitters/componentResources.ts | 14 +++++-------
 quartz/util/theme.ts                          | 22 +++++++++++--------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 1f79d1e6d..79daee4e7 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,10 +1,11 @@
 import { i18n } from "../i18n"
 import { FullSlug, getFileExtension, joinSegments, pathToRoot } from "../util/path"
 import { CSSResourceToStyleElement, JSResourceToScriptElement } from "../util/resources"
-import { googleFontHref, googleSubFontHref } from "../util/theme"
+import { googleFontHref } from "../util/theme"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { unescapeHTML } from "../util/escape"
 import { CustomOgImagesEmitterName } from "../plugins/emitters/ogImage"
+import { JSX } from "preact/jsx-runtime"
 export default (() => {
   const Head: QuartzComponent = ({
     cfg,
@@ -44,8 +45,9 @@ 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)} />
+            {(googleFontHref(cfg.theme, cfg.pageTitle) as string[]).map((href: string) => (
+              <link rel="stylesheet" href={href} />
+            ))}
           </>
         )}
         <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 84d506b5e..c9f266836 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, googleSubFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
+import { googleFontHref, joinStyles, processGoogleFonts } from "../../util/theme"
 import { Features, transform } from "lightningcss"
 import { transform as transpile } from "esbuild"
 import { write } from "./helpers"
@@ -214,14 +214,12 @@ export const ComponentResources: QuartzEmitterPlugin = () => {
       if (cfg.theme.fontOrigin === "local") {
         // 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 googleFontsResponse = await fetch(googleFontHref(ctx.cfg.configuration.theme))
-        googleFontsStyleSheet = await googleFontsResponse.text()
+        // When cdnCaching is true, we link to google fonts in Head.tsx
+        const fontUrls = googleFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle)
+        const fontResponses = await Promise.all(fontUrls.map(url => fetch(url)))
+        const fontStyleSheets = await Promise.all(fontResponses.map(res => res.text()))
 
-        const googleSubFontsResponse = await fetch(googleSubFontHref(ctx.cfg.configuration.theme, ctx.cfg.configuration.pageTitle))
-        const googleSubFontsStyleSheet = await googleSubFontsResponse.text()
-        
-        googleFontsStyleSheet = `${googleFontsStyleSheet}\n${googleSubFontsStyleSheet}`;
+        googleFontsStyleSheet = fontStyleSheets.join('\n')
 
         if (!cfg.baseUrl) {
           throw new Error(
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 1e4e69bfd..30342fef7 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -25,7 +25,7 @@ export type FontSpecification =
 
 export interface Theme {
   typography: {
-    title: FontSpecification
+    title: FontSpecification | undefined
     header: FontSpecification
     body: FontSpecification
     code: FontSpecification
@@ -82,20 +82,24 @@ function formatFontSpecification(type: "title" | "header" | "body" | "code", spe
   return spec.name
 }
 
-export function googleFontHref(theme: Theme) {
-  const { code, header, body } = theme.typography
+export function googleFontHref(theme: Theme, text: string): string[] {
+  const { header, body, code } = theme.typography
+  const title = (theme.typography.title || undefined) ?? header
+
+  const titleFont = formatFontSpecification("title", title)
   const headerFont = formatFontSpecification("header", header)
   const bodyFont = formatFontSpecification("body", body)
   const codeFont = formatFontSpecification("code", code)
 
-  return `https://fonts.googleapis.com/css2?family=${bodyFont}&family=${headerFont}&family=${codeFont}&display=swap`
-}
+  let hrefs = [
+    `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`,
+  ]
 
-export function googleSubFontHref(theme: Theme, text: string): string {
-  const { title } = theme.typography;
-  const titleFont = formatFontSpecification("title", title);
+  if (titleFont !== headerFont) {
+    hrefs.push(`https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`)
+  }
 
-  return `https://fonts.googleapis.com/css2?family=${titleFont}&text=${encodeURIComponent(text)}&display=swap`;
+  return hrefs
 }
 
 export interface GoogleFontFile {