Google Fontsの&text=パラメータ使用時にローカルフォントが優先されない問題と解決策

import * as fs from 'node:fs'
import * as https from 'node:https'

import type { AstroIntegration } from 'astro'
import { glob } from 'glob'
import { JSDOM } from 'jsdom'

interface GoogleFontsOptimizerOptions {
  maxChars?: number
  logDetails?: boolean
  injectLocalFont?: boolean
}

// Google Fonts CSSを取得する関数（ブラウザUser-Agentを使用）
async function fetchGoogleFontsCSS(url: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const urlObj = new URL(url)
    const options = {
      hostname: urlObj.hostname,
      path: urlObj.pathname + urlObj.search,
      headers: {
        // モダンブラウザのUser-Agentを送信してWOFF2フォーマットを取得
        'User-Agent':
          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        Accept: 'text/css,*/*;q=0.1'
      }
    }

    https
      .get(options, (res) => {
        let data = ''
        res.on('data', (chunk) => {
          data += chunk
        })
        res.on('end', () => {
          resolve(data)
        })
      })
      .on('error', reject)
  })
}

// CSSにlocal()を注入する関数（複数フォントファミリー対応）
function injectLocalFontIntoCSS(css: string): string {
  // 各@font-faceブロックを個別に処理
  return css.replace(/@font-face\s*\{[^}]*\}/gs, (fontFaceBlock) => {
    // font-familyプロパティを抽出
    const fontFamilyMatch = fontFaceBlock.match(/font-family:\s*['"]([^'"]+)['"]/)
    if (!fontFamilyMatch) {
      // font-familyが見つからない場合はそのまま返す
      return fontFaceBlock
    }

    const fontFamily = fontFamilyMatch[1]

    // srcプロパティにlocal()を注入（font-family名を使用）
    return fontFaceBlock.replace(/src:\s*url\(/, `src: local('${fontFamily}'), url(`)
  })
}

export default function googleFontsOptimizer(options: GoogleFontsOptimizerOptions = {}): AstroIntegration {
  const { maxChars = 1000, logDetails = true } = options
  const { maxChars = 1000, logDetails = true, injectLocalFont = true } = options

  return {
    name: 'google-fonts-optimizer',
    hooks: {
      'astro:build:done': async ({ dir, logger }) => {
        // ... テキスト抽出処理は前回と同じ ...

        // 各HTMLファイルのGoogle Fontsリンクを更新
        let processedFiles = 0
        for (const htmlFile of htmlFiles) {
          try {
            // ... DOM取得処理は前回と同じ ...

            googleFontsLinks.forEach((link) => {
            for (const link of Array.from(googleFontsLinks)) {
              const href = link.getAttribute('href')
              if (!href) return
              if (!href) continue

              // 既にtextパラメータが含まれている場合はスキップ
              if (href.includes('&text=') || href.includes('?text=')) {
                return
                continue
              }

              // textパラメータを追加
              const encodedText = encodeURIComponent(optimizedText)
              const updatedHref = `${href}&text=${encodedText}`
              link.setAttribute('href', updatedHref)
              hasChanges = true
            })

              if (injectLocalFont) {
                try {
                  // Google Fonts CSSを取得
                  const fontsCss = await fetchGoogleFontsCSS(
                    updatedHref.startsWith('http') ? updatedHref : `https://${updatedHref}`
                  )

                  // local()を注入（各font-familyを自動検出）
                  const modifiedCss = injectLocalFontIntoCSS(fontsCss)

                  // <link>タグを<style>タグに置き換え
                  const styleElement = document.createElement('style')
                  styleElement.textContent = modifiedCss

                  // linkタグの前に挿入してlinkタグを削除
                  link.parentNode?.insertBefore(styleElement, link)
                  link.remove()

                  hasChanges = true

                  if (logDetails) {
                    logger.info(`CSSに各font-familyのlocal()を注入しました`)
                  }
                } catch (error) {
                  logger.warn(`CSS取得エラー、通常の方法にフォールバック: ${error}`)
                  // エラー時は従来通りlinkタグを更新
                  link.setAttribute('href', updatedHref)
                  hasChanges = true
                }
              } else {
                // injectLocalFont無効時は従来通りlinkタグを更新
                link.setAttribute('href', updatedHref)
                hasChanges = true
              }
            }

            // ... ファイル保存処理は前回と同じ ...
          }
        }
      }
    }
  }
}

import { defineConfig } from 'astro/config'
import googleFontsOptimizer from './integrations/googleFontsOptimizer'

export default defineConfig({
  integrations: [
    googleFontsOptimizer({
      maxChars: 1000,
      logDetails: true,
      injectLocalFont: true // デフォルトtrue
    })
  ]
})