Managing Fonts in WordPress Block Themes | CSS-Tips

Fonts are a defining attribute of the design of any website. That features WordPress themes, the place it’s frequent for theme builders to combine a service like Google Fonts into the WordPress Customizer settings for a “basic” PHP-based theme. That hasn’t fairly been the case for WordPress block themes. Whereas integrating Google Fonts into basic themes is well-documented, there’s nothing presently out there for block themes within the WordPress Theme Handbook.

That’s what we’re going to have a look at on this article. Block themes can certainly use Google Fonts, however the course of for registering them is approach totally different than what you might need accomplished earlier than in basic themes.

What we already know

As I stated, there’s little for us to go on so far as getting began. The Twenty Twenty-Two theme is the primary block-based default WordPress theme, and it demonstrates how we are able to use downloaded font recordsdata as belongings within the theme. However it’s fairly unwieldy as a result of it includes a few steps: (1) register the recordsdata within the capabilities.php file and (2) outline the bundled fonts within the theme.json file.

Since Twenty Twenty-Two was launched, although, the method has gotten less complicated. Bundled fonts can now be outlined with out registering them, as proven within the Twenty Twenty-Three theme. Nonetheless, the method nonetheless requires us to manually obtain font recordsdata and bundle them into the themes. That’s a hindrance that type of defeats the aim of easy, drop-in, hosted fonts which might be served on a speedy CDN.

What’s new

In the event you didn’t already know, the Gutenberg venture is an experimental plugin the place options being developed for the WordPress Block and Website Editor can be found for early use and testing. In a current Theme Shaper article, Gutenberg venture lead architect Matias Ventura discusses how Google Fonts — or some other downloaded fonts, for that matter — could be added to dam themes utilizing the Create Block Theme plugin.

This quick video at Study WordPress gives an excellent overview of the Create Block Theme plugin and the way it works. However the backside line is that it does what it says on the tin: it creates block themes. However it does it by offering controls within the WordPress UI that mean you can create a whole theme, little one theme, or a theme fashion variation with out writing any code or ever having to the touch template recordsdata.

I’ve given it a strive! And since Create Block Theme is authored and maintained by the WordPress.org workforce, I’d say it’s the perfect course we’ve got for integrating Google Fonts right into a theme. That stated, it’s undoubtedly value noting that the plugin is in lively growth. Which means issues might change fairly shortly.

Earlier than I get to the way it all works, let’s first briefly refresh ourselves with the “conventional” course of for including Google Fonts to basic WordPress themes.

The way it was accomplished

This ThemeShaper article from 2014 gives a superb instance of how we used to do that in basic PHP themes, as is that this newer Cloudways article by Ibad Ur Rehman.

To refresh our reminiscence, right here is an instance from the default Twenty Seventeen theme displaying how Google fonts are enqueued within the capabilities.php file.

<code>operate twentyseventeen_fonts_url() {
  $fonts_url="";
  /**
   * Translators: If there are characters in your language that aren't
   * supported by Libre Franklin, translate this to 'off'. Don't translate
   * into your individual language.
   */
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) ', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  
  return esc_url_raw( $fonts_url );
}</code>

Then Google Fonts is pre-connected to the theme like this:

<code>operate twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );</code>

What’s incorrect with the standard approach

Nice, proper? There’s a hitch, nonetheless. In January 2022, a German regional court docket imposed a effective on a web site proprietor for violating Europe’s GDPR necessities. The problem? Enqueuing Google Fonts on the location uncovered a customer’s IP handle, jeopardizing person privateness. CSS-Tips coated this some time again.

The Create Block Theme plugin satisfies GDPR privateness necessities, because it leverages the Google Fonts API to serve solely as a proxy for the native vendor. The fonts are served to the person on the identical web site slightly than on Google’s servers, defending privateness. WP Tavern discusses the German court docket ruling and consists of hyperlinks to guides for self-hosting Google Fonts.

The best way to use Google Fonts with block themes

This brings us to right now’s “fashionable” approach of utilizing Google Fonts with WordPress block themes. First, let’s arrange a neighborhood take a look at website. I exploit Flywheel’s Native app for native growth. You should utilize that or no matter you favor, then use the Theme Check Knowledge plugin by the WordPress Themes Staff to work with dummy content material. And, after all, you’ll need the Create Block Theme plugin in there as properly.

Have you ever put in and activated these plugins? In that case, navigate to Look → Handle theme fonts from the WordPress admin menu.

The “Handle theme fonts” display screen shows an inventory of any fonts already outlined within the theme’s theme.json file. There are additionally two choices on the prime of the display screen:

• Add Google fonts. This selection provides Google Fonts on to the theme from the Google fonts API.
• Add native fonts. This selection provides downloaded font recordsdata to the theme.

I’m utilizing a very clean theme by WordPress known as Emptytheme. You’re welcome to roll together with your individual theme, however I wished to name out that I’ve renamed Emptytheme to “EMPTY-BLANK” and modified it, so there aren’t any predefined fonts and kinds in any respect.

I believed I’d share a screenshot of my theme’s file construction and theme.json file to indicate that there are actually no kinds or configurations happening.

Let’s click on the “Add Google Fonts” button. It takes us to a brand new web page with choices to decide on any out there font from the present Google Fonts API.

For this demo, I chosen Inter from the menu of choices and chosen the 300, Common, and 900 weights from the preview display screen:

As soon as I’ve saved my picks, the Inter font kinds I chosen are robotically downloaded and saved within the theme’s belongings/fonts folder:

Discover, too, how these picks have been robotically written to the theme.json file in that screenshot. The Create Block Theme plugin even provides the trail to the font recordsdata.

<code>{
  "model": 2,
  "settings": {
    "appearanceTools": true,
    "structure": {
      "contentSize": "840px",
      "wideSize": "1100px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter",
          "slug": "inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/inter_300.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "regular",
              "fontWeight": "900",
              "src": [
                "file:./assets/fonts/inter_900.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "regular",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/inter_regular.ttf"
              ]
            }
          ]
        }
      ]
    }
  }
}</code>

If we go to the Create Block Theme’s essential display screen and click on the Handle theme fonts button once more, we are going to see Inter’s 300, 400 (Common), and 900 weight variants displayed within the preview panel.

A demo textual content preview field on the prime even permits you to preview the chosen fonts throughout the sentence, header, and paragraph with the font measurement choice slider. You possibly can try this new characteristic in motion on this GitHub video.

The chosen font(s) are additionally out there within the Website Editor World Kinds (Look → Editor), particularly within the Design panel.

From right here, navigate to Templates → Index and click on the blue Edit button to edit the index.html template. We wish to open the World Kinds settings, that are represented as a distinction icon positioned on the top-right of the display screen. Once we click on the Textual content settings and open the Font menu within the Typography part… we see Inter!

Identical factor, however with native fonts

We could as properly have a look at including native fonts to a theme for the reason that Create Block Theme plugin gives that choice. The profit is that you should use any font file you need from no matter font service you favor.

With out the plugin, we’d must seize our font recordsdata, drop them someplace within the theme folder, then resort to the standard PHP route of enqueuing them within the capabilities.php file. However we are able to let WordPress carry that burden for us by importing the font file on the Add native fonts display screen utilizing the Create Block Theme interface. As soon as a file is chosen to add, font face definitions bins are crammed robotically.

Despite the fact that we are able to use any .ttf, .woff, or .woff2 file, I merely downloaded Open Sans font recordsdata from Google Fonts for this train. I snatched two weight variations, common and 800.

The identical auto-magical file administration and theme.json replace we noticed with the Google Fonts choice occurs as soon as once more after we add the font recordsdata (that are accomplished separately). Try the place the fonts landed in my theme folder and the way they’re added to theme.json:

Eradicating fonts

The plugin additionally permits us to take away font recordsdata from a block theme from the WordPress admin. Let’s delete one of many Open Sans variants we put in within the final part to see how that works.

Clicking the Take away hyperlinks triggers a warning so that you can verify the deletion. We’ll click on OK to proceed.

Let’s open our theme folder and test the theme.json file. Positive sufficient, the Open Sans 800 file we deleted on the plugin display screen eliminated the font file from the theme folder, and the reference to it’s lengthy gone in theme.json.

There’s ongoing work taking place

There’s discuss happening including this “Font Supervisor” characteristic to WordPress Core slightly than needing a separate plugin.

An preliminary iteration of the characteristic is obtainable within the repo, and it makes use of the very same method we used on this article. It ought to be GDPR-compliant, too. The characteristic is scheduled to land with WordPress 6.3 launch later this yr.

Wrapping up

The Create Block Theme plugin considerably enhances the person expertise in terms of dealing with fonts in WordPress block themes. The plugin permits us so as to add or delete any fonts whereas respecting GDPR necessities.

We noticed how choosing a Google Font or importing a neighborhood font file robotically locations the font within the theme folder and registers it within the theme.json file. We additionally noticed how the font is an out there choice within the World Kinds settings within the Website Editor. And if we have to take away a font? The plugin completely takes care of that as properly — with out touching theme recordsdata or code.

Thanks for studying! When you’ve got any feedback or strategies, share them within the feedback. I’d like to know what you consider this potential course for font administration in WordPress.

Extra assets

I relied on a number of analysis to write down this text and thought I’d share the articles and assets I used to offer you further context.

WordPress font administration

GitHub points

European GDPR necessities