The current guidelines for themes prohibit the use of CDNs to load assets due to privacy/tracking concerns. The only exception to that rule is Google-Fonts.

Historically, google-fonts have been used as a way for themes to provide more appealing typography options. They are widely used and though there were always privacy & tracking concerns, we could not remove the exception until we had a viable alternative for theme-authors.

To that end, the Themes Team has built an easy-to-use implementation that themes can start using and you can get it on our GitHub repository.

The intention is to remove the Google-Fonts exception soon from our guidelines. When that happens, themes that use Google-Fonts will need to implement a way to locally host the fonts.

Our hope is to see a similar method implemented in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., as there is a discussion on Trac. This is just the first step to what we hope will be a more unified approach.

Usage

A WordPress theme will typically enqueue assets using the wp_enqueue_style function:

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' );

To locally host the webfonts, you will first need to download the wptt-webfont-loader.php file from the repository and copy it in your theme. Once you do that, the above code can be converted to this:

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' );

Supporting IE

The wptt_get_webfont_styles will – by default – download .woff2 files. However, if you need to support IE you will need to use .woff files instead. To do that, you can pass woff as the 2nd argument in the wptt_get_webfont_styles function:

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

Licensing

We believe that locally hosting webfonts will benefit the whole ecosystem by improving performance for visitors and increasing privacy online.

WordPress themes hosted in the official repository are required to be GPL2.0-compatible, but there is a wider community of WordPress themes out there, and they are not always GPL2.0-compatible.

We chose to license this script under the MIT license, which is GPL2.0-compatible. Every theme, pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, or other script can use the code without any restrictions as to the license they use.