首页
/
CMS教程
/
WordPress教程
/
WordPress Twenty Fifteen 移除 Google 字体指南

WordPress Twenty Fifteen 移除 Google 字体指南

WordPress自带Twenty Fifteen模板默认加载Noto Sans和Inconsolata等Google字体URL，国内访问严重拖慢速度，本文提供wp_dequeue_style代码移除twentyfifteen-fonts链接。

张文保 2018年6月13日更新 2026年5月8日 21 分钟阅读 3,582 阅读

大家好，我是保哥。这篇文章想和大家聊一聊一个看似很小、但其实困扰过非常多国内 WordPress 站长的问题：WordPress 自带的 Twenty Fifteen 主题会在页面头部强制加载 Google Fonts（谷歌字体），而由于众所周知的网络环境原因，这个字体 CDN 在国内是基本访问不通的，结果就是首页打开时浏览器一直在等待 fonts.googleapis.com 返回，整个页面被卡死好几秒甚至十几秒，用户体验极差，搜索引擎跳出率也会被拉爆。

我从 2014 年开始接触 WordPress 主题开发与维护，前后帮客户处理过几十个站点的 Google 字体阻塞问题，几乎每一个使用官方默认主题（Twenty Fifteen / Sixteen / Seventeen）或者一些国外付费主题的站点都中招。今天这篇文章我会把完整的排查思路、四种主流去除方法、对应的代码实现、以及操作过程中容易踩的坑全部讲清楚，让你看完就能动手改自己站点。如果你正被首页加载慢的问题困扰，建议把这篇文章收藏起来，逐一对照排查。

为什么 Twenty Fifteen 会拖慢国内访问速度

先说原理。Twenty Fifteen 是 WordPress 4.1 版本随附发布的官方主题，它的字体设计采用了 Noto Sans、Noto Serif、Inconsolata 三套来自 Google Fonts 的开源字体。主题在初始化时会通过 wp_enqueue_style() 把字体样式表注册到队列中，最终在 <head> 标签里输出一行类似下面的链接：

<link rel='stylesheet' id='twentyfifteen-fonts-css' 
      href='//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&subset=latin%2Clatin-ext' 
      type='text/css' media='all' />

这个 URL 指向的是 fonts.googleapis.com，对于服务器在国外或者使用代理的访问者来说没问题，但中国大陆 IP 直接访问时连接会持续超时。浏览器的渲染逻辑是：外链 CSS 是渲染阻塞资源（render-blocking resource），除非超时或失败否则页面不会进入首屏绘制。所以最直接的表现是：网站首页一直白屏，开发者工具的 Network 面板里能看到那条字体请求 pending 长达 10 到 30 秒不等。

我之前给一个客户做诊断的时候，用 PageSpeed Insights 测出 LCP（最大内容绘制）是 14.2 秒，全部时间都耗在等 Google Fonts 上。把字体一去掉，LCP 直接降到 1.8 秒，性能评分从 23 分跳到 91 分。这就是为什么这个看起来很小的优化，对国内站点的体验和搜索排名其实非常关键。Google 自己也把渲染阻塞资源列为核心 Web 指标的重要影响因素，所以无论你是做 SEO 还是单纯做用户体验，这一步都不能省。

另外要补充一点：即便你的站点已经全站 HTTPS、用了高速 CDN、做了图片懒加载，只要这条 Google Fonts 还在，所有优化都被它一票否决。因为浏览器必须等它要么加载完、要么超时失败，才会开始渲染下面的内容。

方法一：在 functions.php 中 dequeue 字体样式（最推荐）

这是最干净、最符合 WordPress 规范的做法。原理是利用 wp_dequeue_style() 把已经入队的字体样式从队列中移除，这样最终输出的 HTML 里就不会有那条 link 标签。

打开 wp-content/themes/twentyfifteen/functions.php（更稳妥的做法是创建子主题然后改子主题的 functions.php，避免主题更新被覆盖），在文件末尾追加下面这段代码：

<?php
/**
 * 移除 Twenty Fifteen 主题头部加载的 Google Fonts
 * 作者：保哥 zhangwenbao.com
 */
function baoge_dequeue_twentyfifteen_google_fonts() {
    wp_dequeue_style( 'twentyfifteen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'baoge_dequeue_twentyfifteen_google_fonts', 20 );

这里有几个细节要特别注意：

优先级 20 很重要。主题默认是用 priority 10 注册字体的，我们必须在它之后执行才能成功 dequeue，所以要写一个比 10 大的数字，常用 20 或 99。
handle 名一定要对。Twenty Fifteen 用的是 twentyfifteen-fonts，Twenty Sixteen 是 twentysixteen-fonts，Twenty Seventeen 是 twentyseventeen-fonts。如果你用的是其他主题，可以打开主题的 functions.php 搜索 googleapis.com 或 wp_enqueue_style 来找出真实的 handle 名。
改完之后一定要清缓存。如果你装了 WP Super Cache、WP Rocket、LiteSpeed Cache 之类的缓存插件，旧的 HTML 会继续命中缓存，看起来好像代码没生效，其实是缓存还没刷新。
子主题方式更安全。父主题升级时所有自定义代码都会被覆盖，子主题不会，建议养成习惯。

方法二：把 Google Fonts 替换成国内 CDN（保留字体效果）

如果你确实喜欢 Twenty Fifteen 那套衬线 + 等宽的搭配，又不想牺牲访问速度，可以选择把字体源替换成国内可用的镜像。这个方案的核心思路是：先 dequeue 掉原来的，再 enqueue 一份新的指向国内 CDN 的样式表。

<?php
function baoge_replace_twentyfifteen_fonts() {
    // 第一步：移除官方的 Google Fonts
    wp_dequeue_style( 'twentyfifteen-fonts' );
    wp_deregister_style( 'twentyfifteen-fonts' );

    // 第二步：注册一份指向国内镜像的字体（示例使用 loli.net）
    $fonts_url = 'https://fonts.loli.net/css?family=Noto+Sans:400,700|Noto+Serif:400,700|Inconsolata:400,700&subset=latin,latin-ext';
    wp_register_style( 'baoge-cn-fonts', $fonts_url, array(), null );
    wp_enqueue_style( 'baoge-cn-fonts' );
}
add_action( 'wp_enqueue_scripts', 'baoge_replace_twentyfifteen_fonts', 20 );

我自己测试下来，fonts.loli.net 在大陆多数地区的 TTFB 在 200 毫秒以内，比直连 Google 快了几十倍。需要提醒的是，第三方镜像源不是官方维护的，存在不可控的稳定性风险，对企业站点我更推荐自托管字体（见方法三）。另外可选的国内镜像还有 fonts.proxy.ustclug.org、fonts.font.im 等，可以多备几个做容灾。

切换镜像的时候要注意检查字体子集（subset），中文站点其实不需要加载 latin-ext 那么大的字符集，只保留 latin 就够了，能进一步缩小请求体积。如果你的站点完全是中文内容，甚至可以考虑把这套英文字体也去掉，直接用系统默认字体栈。

方法三：把字体下载到本地服务器自托管

这是最彻底也最稳的方案，适合追求极致性能或者对隐私合规有要求的站点（比如金融、医疗、政府类网站）。流程分三步：

第一步，到 google-webfonts-helper 这种工具站点，搜索 Noto Sans / Noto Serif / Inconsolata，选择你需要的字重（一般 400、700 够用），勾选 Modern Browsers，下载 zip 包。

第二步，把解压后的字体文件放到主题目录下，比如 wp-content/themes/twentyfifteen-child/fonts/。

第三步，写一段 CSS 用 @font-face 加载本地字体，并通过 functions.php 入队：

<?php
function baoge_load_local_fonts() {
    wp_dequeue_style( 'twentyfifteen-fonts' );
    wp_enqueue_style(
        'baoge-local-fonts',
        get_stylesheet_directory_uri() . '/fonts/local-fonts.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'baoge_load_local_fonts', 20 );

对应的 local-fonts.css 大致长这样：

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./noto-sans-v27-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./inconsolata-v32-latin-regular.woff2') format('woff2');
}

注意 font-display: swap 这一行：它告诉浏览器先用系统字体兜底渲染，等自定义字体下载完再替换，能避免 FOIT（Flash of Invisible Text，不可见文本闪烁）现象。这是 Web 字体优化的最佳实践，强烈建议加上。

自托管的好处不止是速度，还有隐私合规。欧盟 GDPR 已经有判例认定调用 Google Fonts CDN 属于违规收集用户 IP，国内的《个人信息保护法》虽然没有明确条文，但对外资企业、跨境业务来说提前做好自托管也是必要的合规动作。

方法四：通过插件无代码移除（适合不会写代码的朋友）

如果你看到上面的 PHP 代码就头大，也有现成的插件可以一键搞定。我用过比较靠谱的有几款：

Disable Google Fonts：仅 11KB，激活即生效，专门针对 Twenty Fifteen / Sixteen / Seventeen 等官方主题。
Remove Google Fonts References：扫描全站资源，移除所有指向 fonts.googleapis.com 的请求。
OMGF | Host Google Fonts Locally：自动把字体下载到本地服务器并自托管，相当于把方法三自动化了，是我目前最推荐的插件。
Asset CleanUp：更全能的资源清理插件，除了字体还能干掉冗余 JS/CSS。

插件方案的好处是无脑、可视化，缺点是会增加一点点 PHP 加载开销。我的建议是：技术站点用代码方案，企业官网或不熟悉代码的客户站点用插件。如果你的站点已经装了一堆插件，再多一个并不会让性能明显下降，反而代码方案要求你后期持续维护。

验证修改是否生效的三种方式

改完之后一定要验证，不然你以为修复了，其实并没有。我常用的三种验证方法：

查看页面源代码。在浏览器按 Ctrl+U 打开源代码，搜索 fonts.googleapis.com，如果完全找不到就说明 dequeue 成功了。
打开 Network 面板。F12 → Network → 过滤 font，刷新页面，看是否还有指向 google 的请求。
跑一遍 PageSpeed Insights。直接用 PageSpeed Insights 测移动端，关注 Reduce unused CSS 和 Eliminate render-blocking resources 两项指标，如果不再出现 google fonts 字样就达标了。

额外推荐两个工具：GTmetrix 可以看到瀑布图，能直观看出每个资源的加载顺序和阻塞情况；WebPageTest 支持选择中国大陆节点测试，更贴近真实国内访问体验，特别适合用来验证去除字体后的实际效果。

常见 FAQ

Q1：dequeue 之后页面字体看起来变了，怎么办？

这是正常的。原本由 Google Fonts 提供的 Noto Sans 没了之后，浏览器会回退到 CSS 中定义的 fallback 字体（一般是 sans-serif）。如果你在意视觉一致性，请用方法二或方法三补上字体来源。也可以在子主题的 style.css 里直接覆盖默认字体栈，比如改成 font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;，使用各操作系统自带的优秀中文字体，零延迟、零成本、零隐私风险。

Q2：我改了主题 functions.php，主题更新就丢了怎么办？

强烈建议创建子主题（child theme）。在 wp-content/themes 下新建 twentyfifteen-child 目录，里面放 style.css（声明 Template: twentyfifteen）和 functions.php，所有修改都写到子主题里，主题升级父主题不会影响你的代码。这是 WordPress 的官方推荐做法。

Q3：除了 Google Fonts，还有哪些 Google 资源会拖慢国内访问？

常见的还有 Google Analytics（gtag.js）、Google Tag Manager、reCAPTCHA、Google Maps、Google AdSense、Gravatar 头像（secure.gravatar.com）等等。处理思路类似：要么 dequeue，要么用国内可访问的替代品（比如 51la 替代 GA、腾讯地图替代 Google Maps、cravatar.cn 替代 gravatar）。我之前在博客其他文章里也写过这块的方案，可以一并参考。

Q4：我用的不是 Twenty Fifteen，是其他主题，怎么找到字体的 handle 名？

两种方法：第一种，直接在主题目录里全文搜索 wp_enqueue_style 和 googleapis，找到注册的代码就能看到 handle 名；第二种，用 Query Monitor 插件，它会列出页面上所有入队的样式表和它们的 handle，一目了然，是 WordPress 性能调优必备工具。

真实站点优化案例与数据对比

光讲方法太空泛，给大家分享一个我去年帮老客户做的真实案例。这位客户运营一个面向国内市场的医疗器械批发商城，使用 Twenty Sixteen 主题加 WooCommerce 插件，每天接到大量销售电话反馈说网站打不开、加载慢，订单转化率持续下降。

我接手时做了第一轮诊断，用 PageSpeed Insights 拉了一份完整报告，结果让人触目惊心：移动端性能评分 19 分，桌面端 34 分，LCP 18.6 秒，FCP 6.2 秒，CLS 0.08（这一项倒是正常）。瀑布图里明明白白看到 fonts.googleapis.com 这条请求一直在 pending，最后卡到 30 秒才超时，下面所有 JS、CSS、图片资源都在等它，连首屏的 logo 和导航都渲染不出来。

我用方法三给这个站点做了字体本地化：先从 google-webfonts-helper 下载了所需的 woff2 文件总共 187KB，再用 OMGF 插件把所有引用自动替换成本地路径，加上 font-display: swap 配置。改完之后第二天再测，移动端性能评分跳到 82 分，LCP 降到 1.9 秒，FCP 降到 0.8 秒。客户那边反馈说销售电话里抱怨打不开网站的明显减少，三周后订单量环比涨了 14%。

这个案例特别能说明问题：对国内站点来说，去除 Google Fonts 不是锦上添花，而是雪中送炭。我后来又陆续给金融、教育、本地生活几个行业的客户做过类似的优化，几乎每次都是一改见效。

不同优化方案的优劣对比与选型建议

为了方便大家选型，我把上面四种方法做成一个对照表，从难度、效果、维护成本、稳定性四个维度打分：

方法一直接 dequeue 字体：难度低、效果立竿见影，但页面字体会回退到系统默认，视觉上会有变化。适合不在意字体效果、追求极致速度的技术博客。

方法二替换为国内 CDN：难度低、保留原字体效果，但依赖第三方镜像稳定性。适合个人站点和不太追求合规的小团队。

方法三本地自托管：难度中等、效果最好、稳定性最高，但需要手动准备字体文件和 CSS。适合企业官网、电商、政府类有合规要求的站点。

方法四插件方案：难度极低、点几下就能用，但增加插件依赖和一点点性能开销。适合非技术人员和客户站点。

选型建议是：如果你不知道选哪个，默认推荐方法四的 OMGF 插件，它本质上是把方法三的本地自托管自动化了，既能拿到最好的性能，又不需要你写一行代码。等用熟了之后再考虑方法一或方法三的精细化优化。

写在最后

看似很小的一行 link 标签，背后牵涉到的是渲染阻塞、用户体验、SEO 排名整套链条。我从业这么多年最深的体会是：国内做 WordPress 站点，性能优化的第一步永远是去除一切对 Google 资源的依赖。把这一步做好，PageSpeed 分数能直接从 30 多分跳到 80 分以上，跳出率能下降 20% 以上，搜索排名也会跟着回暖。

如果你按上面的步骤操作还是有问题，欢迎在评论区留言，告诉我你用的主题版本、缓存插件、出现的现象，我会尽量帮你排查。也欢迎把这篇文章分享给同样在用 WordPress 建站的朋友，让更多国内站长少走弯路。优化网站这件事没有捷径，每一处细节都值得抠，每一秒加载时间都关系到真金白银的转化。

分享到