Managing Fonts in WordPress Block Themes
Tags: article, fonts, googlefonts, wordpress
Published: 2023-08-21 21:02:29

---
title: Managing Fonts in WordPress Block Themes
published: true
date: 2023-03-06 15:26:31 UTC
tags: Article,fonts,googlefonts,WordPress
canonical_url: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/
---

Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like [Google Fonts](https://fonts.google.com) into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t quite been the case for WordPress block themes. While integrating Google Fonts into classic themes is well-documented, there’s nothing currently available for block themes in the [WordPress Theme Handbook](https://developer.wordpress.org/themes/).

That’s what we’re 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.

### What we already know

As I said, there’s 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’s pretty unwieldy because it involves a couple of steps: (1) [register the files in the `functions.php` file](https://github.com/WordPress/twentytwentytwo/blob/trunk/functions.php#L90-L148) and (2) define the bundled fonts [in the `theme.json` file](https://github.com/WordPress/twentytwentytwo/blob/trunk/theme.json#L172-L183).

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](https://github.com/WordPress/twentytwentythree/blob/trunk/theme.json#L111-L150). However, the process still requires us to manually download font files and bundle them into the themes. That’s a hindrance that sort of defeats the purpose of simple, drop-in, hosted fonts that are served on a speedy CDN.

### What’s new

If you didn’t already know, the [Gutenberg project](https://wordpress.org/plugins/gutenberg/) 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](https://themeshaper.com/2022/11/28/how-to-add-typographic-fonts-to-wordpress-block-themes/), Gutenberg project lead architect [Matias Ventura](https://matiasventura.com/) discusses how Google Fonts — or any other downloaded fonts, for that matter — can be added to block themes using the [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) plugin.

This short [video at Learn WordPress](https://learn.wordpress.org/tutorial/manage-your-block-theme-fonts-with-create-block-theme/) 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.

I’ve given it a try! And since Create Block Theme is [authored and maintained by the WordPress.org](https://wordpress.org/plugins/create-block-theme/) team, I’d say it’s the best direction we have for integrating Google Fonts into a theme. That said, it’s definitely worth noting that the plugin is in active development. That means things could change pretty quickly.

Before I get to how it all works, let’s first briefly refresh ourselves with the “traditional” process for adding Google Fonts to classic WordPress themes.

### How it used to be done

[This ThemeShaper article from 2014](https://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/) 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](https://www.cloudways.com/blog/google-fonts-wordpress/?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=global_cloudways_post_en&utm_content=awareness_wordpress-fonts).

To refresh our memory, here is an example from the default [Twenty Seventeen theme](https://github.com/WordPress/twentyseventeen/blob/master/functions.php#L127-L174) showing how Google fonts are enqueued in the `functions.php` file.

```
function twentyseventeen_fonts_url() {
  $fonts_url = '';
  /**
   * Translators: If there are characters in your language that are not
   * supported by Libre Franklin, translate this to 'off'. Do not translate
   * into your own language.
   */
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $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 );
}
```

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

```
function 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 );
```

### What’s wrong with the traditional way

Great, right? There’s a hitch, however. In January 2022, a [German regional court imposed a fine](https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/) on a website owner for violating Europe’s [GDPR requirements](https://www.gdpreu.org). The issue? Enqueuing Google Fonts on the site exposed a visitor’s IP address, jeopardizing user privacy. [CSS-Tricks covered this a while back.](https://css-tricks.com/bunny-fonts/)

The [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) 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](https://wptavern.com/german-court-fines-website-owner-for-violating-the-gdpr-by-using-google-hosted-fonts) discusses the German court ruling and includes links to guides for self-hosting Google Fonts.

### How to use Google Fonts with block themes

This brings us to today’s “modern” way of using Google Fonts with WordPress block themes. First, let’s set up a local test site. I use Flywheel’s [Local](https://localwp.com/) app for local development. You can use that or whatever you prefer, then use the [Theme Test Data plugin](https://github.com/WPTT/theme-test-data) by the WordPress Themes Team to work with dummy content. And, of course, you’ll want the [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) plugin in there as well.

Have you installed and activated those plugins? If so, navigate to **Appearance** → **Manage theme fonts** from the WordPress admin menu.

![Manage Theme Fonts screen with type samples for Space Mono.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_CCF1BA23A68924924E32749C4E8AADBAA675591E1F3A6BB9A642F97CA9EA7227_1675701055783_screenshot-2.jpg?resize=2560%2C1400&ssl=1)
_Source: WordPress Theme Directory_

The “Manage theme fonts” screen displays a list of any fonts already defined in the theme’s `theme.json` file. There are also two options at the top of the screen:

- **Add Google fonts.** This option adds Google Fonts directly to the theme from the Google fonts API.
- **Add local fonts.** This option adds downloaded font files to the theme.

I’m using a completely blank theme by WordPress called [Emptytheme](https://github.com/WordPress/theme-experiments/tree/master/emptytheme). You’re welcome to roll along with your own theme, but I wanted to call out that I’ve renamed Emptytheme to “EMPTY-BLANK” and modified it, so there are no predefined fonts and styles at all.

![Themes screen showing Empty Theme as the active selection with no screenshot preview.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/appearance-fonts.png?resize=947%2C372&ssl=1)

I thought I’d share a screenshot of my theme’s file structure and `theme.json` file to show that there are literally no styles or configurations going on.

![VS Code file explorer on the left and an open theme.json file on the right.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-4-1.jpg?resize=1117%2C577&ssl=1)
_File structure of Emptytheme (left) and theme.json file (right)_

Let’s click the “Add Google Fonts” button. It takes us to a new page with options to choose any available font from the current [Google](https://developers.google.com/fonts/docs/developer_api) [F](https://developers.google.com/fonts/docs/developer_api)[onts API](https://developers.google.com/fonts/docs/developer_api).

![Add Google Fonts to your theme screen with the select font menu open showing a list of available fonts.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-2.jpg?resize=1000%2C563&ssl=1)

For this demo, I selected **Inter** from the menu of options and selected the 300, Regular, and 900 weights from the preview screen:

![Add Google Fonts to your theme screen with Inter selected and type samples below it of the various weight variations.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-6.jpg?resize=1000%2C563&ssl=1)

Once I’ve saved my selections, the Inter font styles I selected are automatically downloaded and stored in the theme’s `assets/fonts` folder:

![VS Code file explorer on the left showing Inter font files; theme.json on the right showing Inter references.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-5-1.jpg?resize=1206%2C591&ssl=1)

Notice, too, how those selections have been automatically written to the `theme.json` file in that screenshot. The Create Block Theme plugin even adds the path to the font files.

# View the entire `theme.json` code 
```
{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "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": "normal",
              "fontWeight": "900",
              "src": [
                "file:./assets/fonts/inter_900.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/inter_regular.ttf"
              ]
            }
          ]
        }
      ]
    }
  }
}
```

If we go to the Create Block Theme’s main screen and click the **Manage theme fonts** button again, we will see Inter’s 300, 400 (Regular), and 900 weight variants displayed in the preview panel.

![Manage Theme Fonts screen with a button to Add Google Font highlighted in red.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-3.png?resize=886%2C588&ssl=1)

A [demo text preview box](https://github.com/WordPress/create-block-theme/pull/202) at the top even allows you to preview the selected fonts within the sentence, header, and paragraph with the font size selection slider. You can check out this new feature in action in [this GitHub video](https://user-images.githubusercontent.com/1310626/216234715-68ce33f0-3e70-4a90-8277-a904b4126aae.mp4).

The selected font(s) are also available in the Site Editor **Global Styles** ( **Appearance** → **Editor** ), specifically in the Design panel.

![Wordpress Site Editor screen with navigation panel open and highlighting the Edit button.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/design-preview-panel-1.jpg?resize=825%2C321&ssl=1)

From here, navigate to **Templates** → **Index** and click the blue **Edit** button to edit the `index.html` template. We want to open the **Global Styles** settings, which are represented as a contrast icon located at the top-right of the screen. When we click the **Text** settings and open the **Font** menu in the **Typography** section… we see Inter!

![Open template file in the Site Editor with an arrow pointing out the Global Styles settings button.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/Slide4.jpg?resize=1280%2C720&ssl=1)

### Same thing, but with local fonts

We may as well look at adding local fonts to a theme since the Create Block Theme plugin provides that option. The benefit is that you can use any font file you want from whatever font service you prefer.

Without the plugin, we’d have to grab our font files, drop them somewhere in the theme folder, then resort to the traditional PHP route of enqueuing them in the `functions.php` file. But we can let WordPress carry that burden for us by uploading the font file on the **Add local fonts** screen using the Create Block Theme interface. Once a file is selected to upload, font face definitions boxes are filled automatically.

![Add local fonts to your theme screen with options to upload a font file and set its name, style, and weight.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/fonts-1.jpg?resize=1000%2C501&ssl=1)

Even though we can use any `.ttf`, `.woff`, or `.woff2` file, I simply downloaded [Open Sans font files from Google Fonts](https://fonts.google.com/specimen/Open+Sans?query=open+sans) for this exercise. I snatched two weight variations, regular and 800.

The same auto-magical file management and `theme.json` update we saw with the Google Fonts option happens once again when we upload the font files (which are done one at a time). Check out where the fonts landed in my theme folder and how they are added to `theme.json`:

![VS Code showing the font files and the theme.json file references to the font.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/json-add-local-fonts.png?resize=843%2C700&ssl=1)

### Removing fonts

The plugin also allows us to remove font files from a block theme from the WordPress admin. Let’s delete one of the Open Sans variants we installed in the last section to see how that works.

![The interface for removing a font from the theme.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/remove-ui.jpg?resize=1000%2C563&ssl=1)

Clicking the **Remove** links triggers a warning for you to confirm the deletion. We’ll click **OK** to continue.

![Modal confirming the font deletion.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/remove-conform.png?resize=1000%2C233&ssl=1)

Let’s open our theme folder and check the `theme.json` file. Sure enough, the Open Sans 800 file we deleted on the plugin screen removed the font file from the theme folder, and the reference to it is long gone in `theme.json`.

![Updated theme.json file showing the font references have been removed.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/remove-json.jpg?resize=1280%2C720&ssl=1)

### There’s ongoing work happening

[There’s talk going on adding this “Font Manager” feature to WordPress Core](https://github.com/WordPress/gutenberg/pull/46332#issue-1479275259) rather than needing a separate plugin.

An initial iteration of the feature [is available in the repo](https://github.com/WordPress/gutenberg/pull/46332#issuecomment-1366864436), and it uses the exact same approach we used in this article. It should be [GDPR-compliant](https://github.com/WordPress/gutenberg/pull/46332#issuecomment-1340970863), too. The feature is [scheduled to land with WordPress 6.3](https://make.wordpress.org/core/2023/02/04/phase-2-finale/) release later this year.

### Wrapping up

The Create Block Theme plugin significantly enhances the user experience when it comes to handling fonts in WordPress block themes. The plugin allows us to add or delete any fonts while respecting GDPR requirements.

We saw how selecting a Google Font or uploading a local font file automatically places the font in the theme folder and registers it in the `theme.json` file. We also saw how the font is an available option in the Global Styles settings in the Site Editor. And if we need to remove a font? The plugin totally takes care of that as well — without touching theme files or code.

Thanks for reading! If you have any comments or suggestions, share them in the comments. I’d love to know what you think of this possible direction for font management in WordPress.

### Additional resources

I relied on a lot of research to write this article and thought I’d share the articles and resources I used to provide you with additional context.

#### WordPress font management

- [How to add typographic fonts to WordPress block themes](https://themeshaper.com/2022/11/28/how-to-add-typographic-fonts-to-wordpress-block-themes/) (Theme Shaper)
- [How to add Google fonts to WordPress themes](https://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/) (Theme Shaper)
- [How to Use Google Fonts With WordPress?](https://www.cloudways.com/blog/google-fonts-wordpress/?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=global_cloudways_post_en&utm_content=awareness_wordpress-fonts) (Cloudways)
- [Manage your block theme fonts with Create Block Theme](https://learn.wordpress.org/tutorial/manage-your-block-theme-fonts-with-create-block-theme/) (Learn WordPress)
- [Using Create Block Theme](https://wordpress.tv/2022/08/17/using-create-block-theme/) (WordPress.tv)

#### GitHub issues

- [Global Styles/Typography: Managing font sets](https://github.com/WordPress/gutenberg/issues/45271) (#45271)
- [Font manager](https://github.com/WordPress/gutenberg/pull/46332) (#46332)

#### European GDPR requirements

- [German Court Fines Website Owner for Violating the GDPR by Using Google-Hosted Fonts](https://wptavern.com/german-court-fines-website-owner-for-violating-the-gdpr-by-using-google-hosted-fonts) (WPTavern)
- [Complying with GDPR when using Google Fonts](https://make.wordpress.org/themes/2022/06/18/complying-with-gdpr-when-using-google-fonts/) (Make WordPress Themes)
- [German court awards user €100 in damages against website operator for using Google Fonts](https://blog.eprivacy.eu/?p=1398) (ePrivacy Blog)
- [Bunny Fonts](https://css-tricks.com/bunny-fonts/) (CSS-Tricks)

* * *

<small><a rel="nofollow" href="https://css-tricks.com/managing-fonts-in-wordpress-block-themes/">Managing Fonts in WordPress Block Themes</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</small>