如何检测页面所需字体并按需加载谷歌字体以优化站点性能

架构老林

2026-10-5

可行解决方案

以下方案均可实现保留25种字体选择权限的同时，大幅降低页面加载损耗：

方案1：服务端动态注入字体CSS（优先级最高）

文章发布时，后台自动扫描内容块标注的所有自定义字体名称，仅将当前页面用到的字体对应的Google Fonts样式标签注入页头
无需加载全量180KB CSS，单页面用到2-3种字体时对应的CSS体积通常不超过5KB，完全不影响PSI评分
无需客户端执行额外逻辑，无渲染抖动风险，对SEO友好
可额外限制仅请求站点用到的字重（如仅400、700），进一步缩小返回的CSS体积

方案2：客户端动态检测加载（改造成本最低）

无需引入第三方JS库，仅需添加不到1KB的自定义脚本即可实现：

提前将25种支持的字体名称存入数组，页面DOM加载完成后，批量扫描所有元素使用的font-family值，匹配得到当前页面实际用到的自定义字体
动态创建样式标签加载对应字体，配置font-display: swap属性，优先显示默认的本地Poppins字体，字体加载完成后自动切换，无渲染阻塞
示例代码：

const supportFonts = ['Roboto', 'Open Sans', 'Lato'] // 补全剩余22种支持的字体名
const usedFonts = new Set()
document.querySelectorAll('*').forEach(el => {
  const fontFamily = getComputedStyle(el).fontFamily
  supportFonts.forEach(font => {
    if (fontFamily.includes(font)) usedFonts.add(font)
  })
})
if (usedFonts.size) {
  const fontParam = Array.from(usedFonts).map(f => f.replaceAll(' ', '+')).join('&family=')
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`
  document.head.appendChild(link)
}