Testing the Web Fonts API in Gutenberg 12.8


The Web Fonts API was long overdue in the Gutenberg plugin. As you know, the functions that are developed for the Gutenberg plugin end up being incorporated into the core of WordPress.

Basically, what the addition of the Web Fonts API means in Gutenberg 12.8 is that, with this version of the plugin, you can exclusively use the theme.json file to define the fonts (typefaces) that are going to be used in a block theme.

Let’s remember that, in a block theme, there is the possibility -within the site editor- to customize the typography through the «global styles» function. If you need more information about this function, go to our Full Site Editing Course (in spanish).

Prior to Gutenberg version 12.8, the definition of available fonts in global styles is done partly in the theme.json file and partly in the functions.php file. It is likely that, if you are on a version of WordPress prior to the incorporation of the features included in Gutenberg 12.8 (WordPress 5.9, for example) and without the plugin installed, you cannot exclusively use theme.json to define the Web Fonts.

To understand the test below, you need to know where the files for the fonts used in the theme are located, apart from the system ones. The specific location is in the assets/fonts folder inside the theme directory. These are usually files with a “.woff2” extension.

For more information on the use of web fonts (in this case, those of Google), before the FSE, go to the article How to modify the Google Fonts font of any WordPress theme (in spanish).

One important thing to note: Gutenberg 12.8’s Web Fonts API feature works only with locally hosted font files (located inside the theme’s assets/fonts directory). Another issue we wanted to test is whether we could define a Google Fonts font in theme.json if we previously downloaded the .woff2 file from https://google-webfonts-helper.herokuapp.com/fonts/ and uploaded it to assets/fonts. This apparently works and is reflected in the global styles. With this, we also cover the RGPD (read RGPD and Google Fonts: how to protect the privacy of your visitors if you use Google fonts) [in spanish].

As a test, we are going to add the “Aclonica” font to the Twenty Twenty Two theme. We only want the latin charset and the regular 16px style (width 400).

1. Modification in functions.php

We will work in Twenty Twenty Two, following the instructions of Webfonts API #37140

The first thing is to make the modification in the functions.php file as indicated in ticket #37140, replacing the twentytwentytwo_get_font_face_styles function with:

[snippet slug=api-web-fonts-functions-php lang=abap]

2. Download the .woff2 file and location in assets/fonts

We will go to https://google-webfonts-helper.herokuapp.com/fonts/aclonica?subsets=latin and click on the download button in section 4. Unzip the downloaded zip, enter the generated folder and locate the .woff2 file.

Next, upload it to the assets/fonts directory of the Twenty Twenty Two theme.

If you’re using the Local app (by Flywheel), the theme is located at Users>[user]>Local Sites>[site]>app>public>wp-content>themes (on MacOS).

3. Modification in theme.json

The following is to modify the theme.json file, replacing fontFamilies with the following:

[snippet slug=aclonica lang=abap]

With these steps, we will have in global styles the font “Source Serif Pero” in normal and italic (a replica of the original “Source Serif Pro” but defined only in theme.json). And, in addition, the Google font -hosted locally- «Aclonica» in normal style.

Take a look at the result in the vCard site we created in the post Building a vCard website using a block theme and full site editing (FSE) (in spanish)

See in the GIF below how, after setting up the theme.json file, in Styles Globals shows the new font “Aclonica” and how you can change the font of the template.

Conclusions

Based on the information with what’s new in Gutenberg 12.8 provided by Justin Tadlock in Gutenberg 12.8 Launches the Web Fonts API, Improves Group Nesting, and Adds Keyboard Shortcut for Links, we wanted to test the new definition of Web Fonts, including those from Google, in theme.json.