实践自托管 Google Fonts

稍微有那么一点麻烦。

缘起

本站一直使用的是 WordPress 官方出品的 Twenty Fifteen 主题，并以子主题的形式做了一些小的修改。这一主题的一大特点就是西文部分使用了 Google 的 Noto Serif 开放源代码字体。这一字体的效果配合中文的衬线字体还是相当不错的。这一主题的官方设定是直接调用 Google Fonts API。自从 Google 推出 Fonts API 之后，很多的网站都会使用这个 API。这个 API 当然有其优点。首先是兼容性，Google Fonts API 会根据浏览器自动选择加载不同 Web Font 格式的 CSS 文件；其次是可以方便地组合不同的字体、字重、字符集。然而，虽然 Google 的服务可用性还是有相当的保证的，这种服务也许不至于因为没人用就砍掉，但是基于一些方面的考虑，还是决定尝试放到自己服务器上。

过程

开始之前，请确认你对 WordPress 的架构有基本的了解。

首先自然是从 Twenty Fifteen 主题里面找具体用了哪些字体。一般来说，不同的主题定义字体的地方不尽相同。对于 Twenty Fifteen，最终可以定位到 functions.php 文件中的 twentyfifteen_fonts_url() 函数¹。这里摘取其中一段（L291-L297）

/*
* Translators: If there are characters in your language that are not supported
* by Noto Sans, translate this to 'off'. Do not translate into your own language.
*/
if ( 'off' !== _x( 'on', 'Noto Sans font: on or off', 'twentyfifteen' ) ) {
	$fonts[] = 'Noto Sans:400italic,700italic,400,700';
}

可以看到官方的主题巧妙地使用了 _x() 函数²通过主题的本地化机制实现是否加载某一字体的功能。接着的部分就是根据本地化信息判断是否要加载扩展字符集。最后用 add_query_arg() 函数³构建 Google Font API 的请求 URL 字符串，就算是完成了。可以看到 Google Font API 的使用确实是很方便，开发者不需要再费力去考虑字体对浏览器的兼容性。

根据这个函数的代码，也就获得了各种不同字体所要加载的字重和字形信息，整理如下

Noto Sans:400italic,700italic,400,700
Noto Serif:400italic,700italic,400,700
Inconsolata:400,700

至于其他扩展字符，对于这里来说应该用不太到。

然后就要用利用 google-webfonts-helper 项目⁴来完成获取所需要的字体的工作。打开项目的 实例站点，找到我们需要的几种字体，选择好对应的字重字形就可以很方便地生成所需要的 CSS 以及获取字体的下载链接。

可以看到，如果需要支持一些老的浏览器的话，就需要多个不同格式的字体。如果是西文字体可能占用空间并不大，但如果是中文字体，多个字体格式所占用的空间以及加载时长就会是一个很大的问题，如果是自己托管字体这个问题就很麻烦。

处理好字体资源和 CSS 资源的位置，并确认路径正确以后，接着就是要修改 twentyfifteen_fonts_url() 函数。WordPress 提供了子主题的机制，可以方便地用子主题中定义的同名函数覆盖原主题中的函数。这里修改如下

function twentyfifteen_fonts_url() {
	$fonts_url = get_stylesheet_directory_uri().'/css/fonts.css';
	return $fonts_url;
}

这个函数只需要直接返回我们预先设置好的本地字体 CSS 的 URL 即可。

最后应用子主题就完成了。

1. functions.php in twentyfifteen_2.5 – WordPress Themes ↩
2. _x() | Function | WordPress Developer Resources ↩
3. add_query_arg() | Function | WordPress Developer Resources ↩
4. majodev/google-webfonts-helper ↩