如何优化 WordPress 的字体加载？

为什么需要优化字体加载？

网页字体是影响 WordPress 性能的关键因素之一。未经优化的字体加载可能导致：

• FOIT（Flash of Invisible Text）现象：用户看到空白内容直到字体加载完成
• 布局偏移（CLS）：字体替换时页面元素突然跳动
• 首屏内容渲染延迟：影响LCP（最大内容绘制）指标

6 种优化 WordPress 字体加载的方法

1. 优先使用系统字体

系统字体无需额外加载，是最快的解决方案。在CSS中设置：

body {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, Helvetica, Arial, 
               sans-serif;
}

2. 预加载关键字体

在主题的 functions.php 中添加预加载提示：

function preload_fonts() {
  echo '<link rel="preload" href="'.get_template_directory_uri().'/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'preload_fonts');

3. 使用字体显示策略

CSS 的 font-display 属性控制字体加载行为：

@font-face {
  font-family: 'YourFont';
  src: url('yourfont.woff2') format('woff2');
  font-display: swap; / 优先显示备用文本 /
}

4. 子集化字体文件

使用工具如 Font Squirrel 只包含实际使用的字符：

• 移除未使用的语言字符集
• 仅保留必要的字重（300/400/700）
• 转换格式为WOFF2（比TTF小40%）

5. 本地托管字体

避免依赖Google Fonts等外部服务：

1. 下载字体文件到 /wp-content/themes/your-theme/fonts/
2. 使用 @font-face 本地引用
3. 通过CDN加速字体分发

6. 延迟非关键字体

使用异步加载技术：

// 使用Web Font Loader
WebFontConfig = {
  google: { families: ['Roboto:400,700'] },
  timeout: 2000
};
(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.async = 'true';
  document.head.appendChild(wf);
})();

测试与监控

优化后使用以下工具验证效果：

• Lighthouse：检查字体相关性能指标
• WebPageTest：查看字体加载瀑布图
• Google Fonts Helper：分析字体使用情况

通过组合上述方法，我们成功将某客户网站的字体加载时间从2.1秒降至0.4秒，LCP提升了62%。