{"id":377123,"date":"2023-03-06T07:26:31","date_gmt":"2023-03-06T15:26:31","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377123"},"modified":"2023-03-06T07:26:41","modified_gmt":"2023-03-06T15:26:41","slug":"managing-fonts-in-wordpress-block-themes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/managing-fonts-in-wordpress-block-themes\/","title":{"rendered":"Managing Fonts in WordPress Block Themes"},"content":{"rendered":"\n

Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it\u2019s common for theme developers to integrate a service like Google Fonts<\/a> into the WordPress Customizer settings for a \u201cclassic\u201d PHP-based theme. That hasn\u2019t quite been the case for WordPress block themes. While integrating Google Fonts into classic themes is well-documented, there\u2019s nothing currently available for block themes in the WordPress Theme Handbook<\/a>.<\/p>\n\n\n\n

That\u2019s what we\u2019re going to look at in this article. Block themes can indeed use Google Fonts, but the process for registering them is way different than what you might have done before in classic themes.<\/p>\n\n\n\n\n\n\n

What we already know<\/h3>\n\n\n

As I said, there\u2019s little for us to go on as far as getting started. The Twenty Twenty-Two theme is the first block-based default WordPress theme, and it demonstrates how we can use downloaded font files as assets in the theme. But it\u2019s pretty unwieldy because it involves a couple of steps: (1) register the files in the functions.php<\/code> file<\/a> and (2) define the bundled fonts in the theme.json<\/code> file<\/a>.<\/p>\n\n\n\n

Since Twenty Twenty-Two was released, though, the process has gotten simpler. Bundled fonts can now be defined without registering them, as shown in the Twenty Twenty-Three theme<\/a>. However, the process still requires us to manually download font files and bundle them into the themes. That\u2019s a hindrance that sort of defeats the purpose of simple, drop-in, hosted fonts that are served on a speedy CDN.<\/p>\n\n\n

What\u2019s new<\/h3>\n\n\n

If you didn\u2019t already know, the Gutenberg project<\/a> is an experimental plugin where features being developed for the WordPress Block and Site Editor are available for early use and testing. In a recent Theme Shaper article<\/a>, Gutenberg project lead architect Matias Ventura<\/a> discusses how Google Fonts \u2014 or any other downloaded fonts, for that matter \u2014 can be added to block themes using the Create Block Theme<\/a> plugin.<\/p>\n\n\n\n

This short video at Learn WordPress<\/a> provides a good overview of the Create Block Theme plugin and how it works. But the bottom line is that it does what it says on the tin: it creates block themes. But it does it by providing controls in the WordPress UI that allow you to create an entire theme, child theme, or a theme style variation without writing any code or ever having to touch template files.<\/p>\n\n\n\n

I\u2019ve given it a try! And since Create Block Theme is authored and maintained by the WordPress.org<\/a> team, I\u2019d say it\u2019s the best direction we have for integrating Google Fonts into a theme. That said, it\u2019s definitely worth noting that the plugin is in active development. That means things could change pretty quickly.<\/p>\n\n\n\n

Before I get to how it all works, let\u2019s first briefly refresh ourselves with the \u201ctraditional\u201d process for adding Google Fonts to classic WordPress themes.<\/p>\n\n\n

How it used to be done<\/h3>\n\n\n

This ThemeShaper article from 2014<\/a> provides an excellent example of how we used to do this in classic PHP themes, as is this newer Cloudways article by Ibad Ur Rehman<\/a>.<\/p>\n\n\n\n

To refresh our memory, here is an example from the default Twenty Seventeen theme<\/a> showing how Google fonts are enqueued in the functions.php<\/code> file.<\/p>\n\n\n\n

function twentyseventeen_fonts_url() {\n  $fonts_url = '';\n  \/**\n   * Translators: If there are characters in your language that are not\n   * supported by Libre Franklin, translate this to 'off'. Do not translate\n   * into your own language.\n   *\/\n  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );\n  if ( 'off' !== $libre_franklin ) {\n    $font_families = array();\n    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';\n    $query_args = array(\n      'family' => urlencode( implode( '|', $font_families ) ),\n      'subset' => urlencode( 'latin,latin-ext' ),\n    );\n    $fonts_url = add_query_arg( $query_args, 'https:\/\/fonts.googleapis.com\/css' );\n  }\n  return esc_url_raw( $fonts_url );\n}<\/code><\/pre>\n\n\n\n
Then Google Fonts is pre-connected to the theme like this:<\/p>\n\n\n\n
function twentyseventeen_resource_hints( $urls, $relation_type ) {\n  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {\n    $urls[] = array(\n      'href' => 'https:\/\/fonts.gstatic.com',\n      'crossorigin',\n    );\n  }\n  return $urls;\n}\nadd_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );<\/code><\/pre>\n\n\n
What\u2019s wrong with the traditional way<\/h3>\n\n\n
Great, right? There\u2019s a hitch, however. In January 2022, a German regional court imposed a fine<\/a> on a website owner for violating Europe\u2019s GDPR requirements<\/a>. The issue? Enqueuing Google Fonts on the site exposed a visitor’s IP address, jeopardizing user privacy. CSS-Tricks covered this a while back.<\/a><\/p>\n\n\n\n
The Create Block Theme<\/a> plugin satisfies GDPR privacy requirements, as it leverages the Google Fonts API to serve solely as a proxy for the local vendor. The fonts are served to the user on the same website rather than on Google’s servers, protecting privacy. WP Tavern<\/a> discusses the German court ruling and includes links to guides for self-hosting Google Fonts.<\/p>\n\n\n
How to use Google Fonts with block themes<\/h3>\n\n\n
This brings us to today\u2019s \u201cmodern\u201d way of using Google Fonts with WordPress block themes. First, let’s set up a local test site. I use Flywheel\u2019s Local<\/a> app for local development. You can use that or whatever you prefer, then use the Theme Test Data plugin<\/a> by the WordPress Themes Team to work with dummy content. And, of course, you\u2019ll want the Create Block Theme<\/a> plugin in there as well.<\/p>\n\n\n\n
Have you installed and activated those plugins? If so, navigate to Appearance<\/strong> \u2192 Manage theme fonts<\/strong> from the WordPress admin menu.<\/p>\n\n\n\n
\"Manage
Source: WordPress Theme Directory<\/a><\/figcaption><\/figure>\n\n\n\n
The \u201cManage theme fonts\u201d screen displays a list of any fonts already defined in the theme\u2019s theme.json<\/code> file. There are also two options at the top of the screen:<\/p>\n\n\n\n