WordPress主題團(tuán)隊(duì)開發(fā)Web字體加載器，本地化Web字體加載

現(xiàn)在，很多WordPress主題都采用了第三方Web字體，比如非常受歡迎的Google 網(wǎng)頁字體，但是這種第三方字體，對于網(wǎng)站的加載速度的影響是比較大的，此外還可能對用戶隱私造成影響。

WordPress主題審核團(tuán)隊(duì)一直以來也是不允許在主題中加載第三方或CDN的腳本和樣式文件的，但是此前對于Google字體是唯一放行的例外。不過現(xiàn)在他們已經(jīng)發(fā)布了一個(gè)Web字體加載器（Webfonts Loader），可供主題作者用來為主題集成Web字體本地化加載的功能。

也就是說，通過Webfonts Loader加載的Web字體，會(huì)自動(dòng)將字體文件下載到用戶的主機(jī)空間中，然后從本地加載，不再需要CDN調(diào)用外鏈的字體。

隨著Webfonts Loader的到來，以后只要主題中用到第三方Web字體（不僅限于Google字體），都需要采用這個(gè)加載器實(shí)現(xiàn)本地化調(diào)用。

Webfonts Loader

項(xiàng)目地址：https://github.com/WPTT/webfont-loader

下載網(wǎng)絡(luò)字體（例如Google字體），并將其托管在WordPress網(wǎng)站本地（下載到 /wp-content/fonts 目錄）。

這樣可以提高性能（減少對多個(gè)頂級域的請求）并增強(qiáng)隱私保護(hù)。由于字體是在站點(diǎn)上本地托管的，無需ping通到第三方服務(wù)器來獲取Web字體，無法進(jìn)行跟蹤。

用法

WordPress主題通常使用以下wp_enqueue_style功能來排隊(duì)腳本文件：

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字體，您首先需要從該存儲(chǔ)庫下載wptt-webfont-loader.php文件并將其復(fù)制到主題中。完成此操作后，以上代碼可以轉(zhuǎn)換為以下代碼：

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

默認(rèn)情況下，wptt_get_webfont_styles將下載.woff2文件。但是，如果需要支持IE，則需要使用.woff文件。為此，您可以在wptt_get_webfont_styles函數(shù)中，將woff作為第二個(gè)參數(shù)傳遞：

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

總結(jié)

Webfonts Loader 的到來，為所有主題開發(fā)者提供了對Web字體的標(biāo)準(zhǔn)處理方式，但是這個(gè)需要主題開發(fā)者進(jìn)行集成實(shí)現(xiàn)。

如果你是一般用戶，并且主題沒有集成這個(gè)功能，那你可以使用 OMGF | Host Google Fonts Locally 或 Self-Hosted Google Fonts 插件來實(shí)現(xiàn)Google字體本地化加載。