Google在线字体无法加载解决办法大全

2016-01-18 发表者 Clamis | 暂无评论 | 1,083次浏览

由于网站搬家因此最近Clamis花了比较大的精力在Wordpress网站速度优化上。客观地讲Vultr日本节点VPS的速度还是相当给力的，ping值低速度快，网页资源加载速度很快。但是Clamis发现了一个奇怪的现象，那就是在公司用Firefox以及Chome访问本站的时候打开速度都很快，但是用IE打开却总是要加载很长时间才可以打开。

刚开始的时候Clamis以为是因为公司电脑上的IE版本太低以及使用了公司的pac所以速度很慢，但是今天无意间在用F12打开IE的开发工具查看网络加载的时候却发现，原来每次导致页面长时间打不开的元凶竟然是Wordpress使用的主题中调用了googleapis的在线字体库！由于众所周知的原因，fonts.googleapis.com在国内是打不开的，因此导致IE花了很长的时间等待该资源响应从而拖慢了网站速度。

遍寻网络解决这个问题的办法主要有以下三种：

1. 禁用Google字体加载

就是这么简单暴力，反正绝大部分使用Google字体的都是英文字体不支持中文，所以禁用了对WP主题显示也不会有太大影响（如果是英文网站的话还是可能有很大影响的）。

禁用方法Clamis知道的有三种：

从Wordpress插件库搜索并安装插件Disable Google Fonts，然后启用即可；

如果不想安装插件的话直接在主题的functions.php里面加入下面的代码禁用加载最常见的Open Sans字体：

function remove_open_sans()
<pre class="lang:default decode:true ">{
wp_deregister_style(‘open-sans’);
wp_register_style(‘open-sans’,false);
wp_enqueue_style(‘open-sans’,”);
}
add_action(‘init’,’remove_open_sans’);

需要注意的是这种办法在主题更新的时候functions.php会被覆盖更新需要再次修改。

其实在WP的wp-includes/script-loader.php文件中是有对Open Sans等字体是否加载的判断语句的：
```
/* translators: If there are characters in your language that are not supported
  * by Open Sans, translate this to 'off'. Do not translate into your own language.
  */
if ( 'off' !== _x( 'on', 'Open Sans font: on or off' ) ) {
$subsets = 'latin,latin-ext';
 
/* translators: To add an additional Open Sans character subset specific to your language,
* translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language.
*/
$subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)' );
 
if ( 'cyrillic' == $subset ) {
$subsets .= ',cyrillic,cyrillic-ext';
} elseif ( 'greek' == $subset ) {
$subsets .= ',greek,greek-ext';
} elseif ( 'vietnamese' == $subset ) {
$subsets .= ',vietnamese';
}
 
// Hotlink Open Sans, for now
$open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
}
```
因此我们可以通过修改languages目录下里的语言文件来达到禁用Open Sans字体加载的目的。方法如下：
- 由于WP的语言文件为.po/.mo格式的，.mo文件为.po文件编译生成的。因此需要使用WP官方推荐的PoEdit工具，或者其他在线编译网站，例如konstruktors。
- 先从wp-content\languages目录下找到原始po文件，例如简体中文的文件包为zh_CN.po，下载并进行编辑。找到其中的”Open Sans font: on or off”字段，将翻译值从”on”修改为”off”。如果使用文本编辑器的话看到效果如下：
```
msgctxt "Open Sans font: on or off"
msgid "on"
msgstr "off"
```
- 如果是使用PoEdit编辑的话在保存的时候会自动生成zh_CN.mo文件，如果不是的话将保存后的zh_CN.po用上面的在线网站编译生成zh_CN.mo文件。然后将zh_CN.po和zh_CN.mo两个文件上传回服务器并覆盖源文件即可。
- 该方法同样适用于其他WP主题使用了Google字库的情况。例如Clamis本站主题就调用了Google字库的Droid Sans，那么只需要按照上述方法修改wp-content/themes/themename/languages/下的zh_CN.po文件即可（themename替换为相应主题名称）。

2. 字体本地化

原理很简单，一般WP主题都只会用到几种字体而已。既然Googleapis无法访问，那我们就把用到的font字体都下载到WP服务器上，然后修改源文件中的引用地址即可。具体操作为：

第一步是最简单的但往往也是最困难的，就是要把用到的Google字体下载回来。打开IE/Firefox/Chome的开发者工具（快捷键F12）并刷新自己的WP网站变可以在其中的“网络”部分可以看到加载的Google字体URL，将该URL复制到浏览器中打开便可以看到字体描述文件，通过其中的woff或ttf文件URL可以分别把这几个woff/ttf字体文件下载下来。但是要注意的这步需要番/羽/弓/虽才可以访问!
在WP服务器上wp-includes/fonts下新建一个名为google目录，将上一步下载的字体文件上传到其中。如果希望偷懒的话可以不用修改字体文件名。

在wp-includes/css目录下新建文件google-font.css，内容如下（以最常见的Open Sans字体为例）：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/google/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/google/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../fonts/google/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(../fonts/google/PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(../fonts/google/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(../fonts/google/PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff) format('woff');
}

打开wp-includes/script-loader.php文件，找到如下行并将其指向修改为本地的css文件：

$open_sans_font_url = "//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
//修改为
$open_sans_font_url = "/wp-includes/css/google-fonts.css";

3. 修改Googleapis指向国内镜像网站

更新：useso.com已经停止服务，现在可以替换成极客族公共加速服务。同时，网页中引用//而不是https://可以让浏览器自动判断使用HTTP还是HTTPS方式加载资源

方法2虽然可以了Googleapis无法访问的问题，但是如果架设WP的主机在国外的话，很可能由于网站本身访问速度就慢再加上font字体在本地速度更是雪上加霜。

此时还有一种方法同时也是Clamis目前采用的方法，就是将指向googleapis.com的链接转向国内镜像服务器。目前Google在中国并没有官方的镜像服务器，但是奇虎360对Google的fonts.googleapis.com和ajax.googleapis.com站点下的所有内容做了国内镜像。我们只需要把WP源文件中的相应地址修改为 fonts.useso.com 和 ajax.useso.com 即可。

先查看需要修改的文件以及链接位置：

# grep -r 'fonts.googleapis.com' *
 
wp-admin/includes/class-wp-press-this.php: $open_sans_font_url = ',' . add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
wp-content/themes/twentyfifteen/functions.php: ), 'https://fonts.googleapis.com/css' );
wp-content/themes/yoko/functions.php: $fonts_url = add_query_arg( $query_args, "//fonts.googleapis.com/css" );
wp-content/themes/twentyfourteen/functions.php: $font_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
wp-content/themes/twentysixteen/functions.php: ), 'https://fonts.googleapis.com/css' );
wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/functions.php: wp_register_style( 'minileven-open-sans', add_query_arg( $opensans_query_args, "//fonts.googleapis.com/css" ), array(), null );
wp-content/plugins/jetpack/_inc/lib/admin-pages/class.jetpack-admin-page.php: wp_enqueue_style( 'jetpack-google-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,600,800' );
wp-includes/script-loader.php: $open_sans_font_url = "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
wp-includes/js/tinymce/plugins/compat3x/css/dialog.css://@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin");

其实也可以使用命令

# grep -r 'fonts.googleapis.com' *|awk '{ print $1}'|awk -F: '{print $1}'

来只显示文件名，这样看起来更简洁一点。不过需要注意的是如果同一个文件中有多处需要修改的时候不要有遗漏。

将以上对应文件处的fonts.googleapis.com替换为fonts.useso.com后保存即可。特别提醒的是：由于useso.com并未提供https安全连接，因此网址中的https://需要替换为http://，否则将无法找到资源。

同理可以查看修改ajax.googleapis.com：

# grep -r 'ajax.googleapis.com' *|awk '{ print $1}'|awk -F: '{print $1}'|uniq
 
wp-content/plugins/crayon-syntax-highlighter/util/external_use.php
wp-content/plugins/crayon-syntax-highlighter/js/jquery-colorpicker/index.html
wp-content/plugins/wordpress-seo/css/xml-sitemap-xsl.php
wp-content/plugins/w3-total-cache/lib/W3/ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.10-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.7-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.9-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.6-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.8-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.2.11-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.4-ConfigKeys.php
wp-content/plugins/w3-total-cache/configs/0.9.3-ConfigKeys.php
wp-includes/script-loader.php

以上就是GoogleAPIs的几种处理方法，修改过后你会发现网页加载速度会提升很多。

作者：Clamis

我微笑着走向地狱，身后是正在毁灭的天堂

克拉米斯遐想

Clamis的流水日记簿

Google在线字体无法加载解决办法大全

1. 禁用Google字体加载

2. 字体本地化

3. 修改Googleapis指向国内镜像网站

作者：Clamis

发表回复取消回复

1. 禁用Google字体加载

2. 字体本地化

3. 修改Googleapis指向国内镜像网站

作者：Clamis

发表回复 取消回复

发表回复取消回复