fix: broken google font mirror

Author: harlan-zw

src/module.ts

@@ -317,12 +317,18 @@ export default defineNuxtModule<ModuleOptions>({
               logger.warn(`The ${fontKey} font was skipped because remote fonts are not available in StackBlitz, please use a local font.`)
               return false
             }
-            if (await downloadFont(f, fontStorage, config.googleFontMirror)) {
+            const result = await downloadFont(f, fontStorage, config.googleFontMirror)
+            if (result.success) {
               // move file to serverFontsDir
               f.key = `nuxt-og-image:fonts:${fontFileBase}.ttf.base64`
             }
             else {
-              logger.warn(`Failed to download font ${fontKey}. You may be offline or behind a firewall blocking Google. Consider setting \`googleFontMirror: true\`.`)
+              const mirrorMsg = config.googleFontMirror
+                ? `using mirror host \`${result.host}\``
+                : 'Consider setting `googleFontMirror: true` if you are in China or behind a firewall.'
+              logger.warn(`Failed to download font ${fontKey} ${mirrorMsg}`)
+              if (result.error)
+                logger.warn(`  Error: ${result.error.message || result.error}`)
               return false
             }
           }

src/util.ts

@@ -30,31 +30,38 @@ export async function downloadFont(font: ResolvedFontConfig, storage: Storage, m
   const { name, weight, style } = font
   const key = `${name}-${style}-${weight}.ttf.base64`
   if (await storage.hasItem(key))
-    return true
+    return { success: true }
 
   const host = typeof mirror === 'undefined' ? 'fonts.googleapis.com' : mirror === true ? 'fonts.font.im' : mirror
+  const cssUrl = `https://${host}/css2?family=${name}:${style === 'ital' ? `ital,wght@1,${weight}` : `wght@${weight}`}`
+
   // using H3Event $fetch will cause the request headers not to be sent
-  const css = await $fetch(`https://${host}/css2?family=${name}:${style === 'ital' ? `ital,wght@1,${weight}` : `wght@${weight}`}`, {
+  const css = await $fetch(cssUrl, {
     timeout: 10 * 1000, // 10 second timeout
     headers: {
       // Make sure it returns TTF.
       'User-Agent':
         'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
     },
-  }).catch(() => {
-    return false
+  }).catch((err) => {
+    return { error: err }
   })
-  if (!css)
-    return false
+  if (!css || typeof css !== 'string')
+    return { success: false, error: css?.error || new Error(`Failed to fetch CSS from ${cssUrl}`), host }
 
   const ttfResource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
   if (ttfResource?.[1]) {
-    const buf = await $fetch(ttfResource[1], { baseURL: host, responseType: 'arrayBuffer' })
+    const buf = await $fetch(ttfResource[1], { responseType: 'arrayBuffer' }).catch((err) => {
+      return { error: err }
+    })
+    if (buf?.error)
+      return { success: false, error: buf.error, host, fontUrl: ttfResource[1] }
+
     // need to base 64 the buf
-    const base64Font = Buffer.from(buf).toString('base64')
+    const base64Font = Buffer.from(buf as ArrayBuffer).toString('base64')
     // output to outputPath
     await storage.setItem(key, base64Font)
-    return true
+    return { success: true }
   }
-  return false
+  return { success: false, error: new Error('No TTF resource found in CSS response'), host }
 }