WordPress主Web字体加载器本地化Web字体加载

PetitQ WordPress教程 2020-9-30 1.05K 0 0

现在，很多 WordPress 主题都采用了第三方 Web 字体，比如非常受欢迎的 Google 网页字体，但是这种第三方字体，对于网站的加载速度的影响是比较大的，此外还可能对用户隐私造成影响。WordPress 主题审核团队一直以来也是不允许在主题中加载第三方或 CDN 的脚本和样式文件的，但是此前对于 Google 字体是唯一放行的例外。不过现在他们已经发布了一个 Web 字体加载器（Webfonts Loader），可供主题作者用来为主题集成 Web 字体本地化加载的功能。

也就是说，通过 Webfonts Loader 加载的 Web 字体，会自动将字体文件下载到用户的主机空间中，然后从本地加载，不再需要 CDN 调用外链的字体。随着 Webfonts Loader 的到来，以后只要主题中用到第三方 Web 字体（不仅限于 Google 字体），都需要采用这个加载器实现本地化调用。

也想出现在这里？联系我们吧

Webfonts Loader

项目地址：https://github.com/WPTT/webfont-loader

下载网络字体（例如 Google 字体），并将其托管在 WordPress 网站本地（下载到 /wp-content/fonts 目录）。这样可以提高性能（减少对多个顶级域的请求）并增强隐私保护。由于字体是在站点上本地托管的，无需 ping 通到第三方服务器来获取 Web 字体，无法进行跟踪。

使用方法

WordPress 主题通常使用以下 wp_enqueue_style 功能来排队脚本文件：

```
function my_theme_enqueue_assets() {
```
```
	// Load the theme stylesheet.
```
```
	wp_enqueue_style(
```
```
		'my-theme',
```

		get_stylesheet_directory_uri() . '/style.css',

```
		array(),
```
```
		'1.0'
```
```
	);
```
```
	// Load the webfont.
```
```
	wp_enqueue_style(
```
```
		'literata',
```

		'https://fonts.googleapis.com/css2?family=Literata&display=swap',

```
		array(),
```
```
		'1.0'
```
```
	);
```
```
}
```

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

要本地托管 Web 字体，您首先需要从该存储库下载 wptt-webfont-loader.php 文件并将其复制到主题中。完成此操作后，以上代码可以转换为以下代码：

```
function my_theme_enqueue_assets() {
```
```
	// Include the file.
```

	require_once get_theme_file_path( 'inc/wptt-webfont-loader.php' );

```
	// Load the theme stylesheet.
```
```
	wp_enqueue_style(
```
```
		'my-theme',
```

		get_stylesheet_directory_uri() . '/style.css',

```
		array(),
```
```
		'1.0'
```
```
	);
```
```
	// Load the webfont.
```
```
	wp_add_inline_style(
```
```
		'my-theme',
```

		wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )

```
	);
```
```
}
```

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

支持 IE

默认情况下，wptt_get_webfont_styles 将下载.woff2 文件。但是，如果需要支持 IE，则需要使用.woff 文件。为此，您可以在 wptt_get_webfont_styles 函数中，将 woff 作为第二个参数传递：

wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' );

总结

Webfonts Loader 的到来，为所有主题开发者提供了对 Web 字体的标准处理方式，但是这个需要主题开发者进行集成实现。如果你是一般用户，并且主题没有集成这个功能，那你可以使用 OMGF | Host Google Fonts Locally 或 Self-Hosted Google Fonts 插件来实现 Google 字体本地化加载。