WordPress has been on the road to a real Web Fonts API for a long time - with the release of Gutenberg 12.8 on 16 March 2022, it's here. Learn how to use the WordPress Web Fonts API and what will finally change thanks to the Web Fonts API.

Among other things, the WordPress Web Fonts API lets you dynamically add custom fonts to your WordPress themes, giving you more control over the text on your WordPress website. 

What is the new WordPress Web Fonts API? 

In September 2021, a proposal by WordPress developer Ari Stathopoulos for a Web Fonts API was discussed in the community. The WordPress Web Fonts API is a major breakthrough for you as a web developer or designer. The WordPress Web Fonts API allows you to embed fonts into your WordPress websites without having to worry about the font-face rule or the cross domain policy.  

The WordPress Web Fonts API has been integrated into the new Gutenberg version 12.8 and is scheduled to come to the Core with WordPress 6.0. "The fact that it took us so long to get to this point is a testament to how complex web fonts can be" - as Héctor Prieto explains in the official blog post for Gutenberg 12.8 on WordPress.org.

Now that this framework is in place, further tools and optimizations can be built on top of it to ensure that WordPress provides the best possible experience (and privacy) for end users.

Why is a Core API necessary? 

Standards allow for a routine implementation of fonts. It is a standard so that any developer can look at a few lines of code and understand what the code does. By implementing an API, a stable basis for future developments is made possible.  

The Gutenberg project

The Gutenberg editor was developed. Along with the ability to use global styles, developers also needed to be able to specify which fonts should be used on the site in Gutenberg. Thanks to the fact that it is an API, other applications or parts of the same application can also retrieve the data from the WordPress Web Fonts API.

A scenario of application: You have commissioned a developer to create a custom cookie banner. On your WordPress website, you use the WordPress Web Fonts API to specify which fonts to use. The developer can use the same web fonts that are used on the other website.

You can use the same API to manage the fonts on the website. You don't need to manage the settings in multiple places. It is worth noting that the first version is only a foundation on which the WordPress team will build.

The road to a Web Fonts API in WordPress was a rollercoaster of emotions for developers. After being dropped from WordPress 5.9, it was moved to the Gutenberg project where it could be developed along with related features that relied on it.

This means that you can use and set your fonts from the same place and the changes will be synchronized with all places where you use the WordPress Web Fonts API. It's worth noting that the first version is just a foundation that the WordPress team will continue to build on. 

In this article, we'll show you how to use the WordPress Web Fonts API, from installing it to adding fonts to the API. Let's get started.  

What does the WordPress Web Fonts API do? 

This API is the first step in enabling font loading in a powerful, privacy-friendly and future-proof way - something that is very difficult to do without such a framework.

With the WordPress Web Fonts API, theme developers can specify which font families should be used in WordPress along with the associated files. WordPress automatically loads the fonts with the correct CSS in the editor and frontend. In the first version of the WordPress Web Fonts API, scripts and styles are queued. The reason for this is the need for a uniform solution.

The Web Font API function acts as a wrapper for the stylesheet API. This is because to queue a web font, the font file itself must be queued by queuing the stylesheet (or adding an inline style). 

Initially, you can only use local fonts. In the future, the WordPress team will surely add support for more font providers. 

Instead of removing them, perhaps we could implement them properly and force locally hosted web fonts to improve performance and privacy? This way we would set a good example and see a significant improvement in performance and privacy in the WordPress ecosystem as themes and plugins that currently use Google fonts, Adobe fonts, etc. will adopt the API. 

Quote from GitHub

It can lead to performance problems when theme downloads become larger if only local fonts are supported. However, for many themes this should not be a problem - one, two or three font packages should be sufficient for most themes. However, if global style variations become popular, we could see themes offering many fonts to cover several predefined designs.  

How to use the WordPress Web Fonts API 

Let's now take a look at how the new WordPress Web Fonts API can be used in practice. 

There are two methods to register web fonts with WordPress: via your "theme.json" file, which is standard since WordPress 5.8, or via the @font-face method. The theme.json keys and values are mostly the same as the CSS @font-face rule. If you don't know them, you should brush up on your knowledge. The @font-face rule is a CSS style that lets you specify the font you want to use on your website.

You can either use a font that is already installed on the user's computer or you can load a font from a remote server. The theme.json file contains the list of fonts you want to use on your website. It contains the name of the font, the URL of the font file and the weight and style of the font.  

We will now look at how you can change the fonts using the theme.json file. To do this, you need to connect to your WordPress website via SFTP. This is how you access the files on your website. Use an FTP client of your choice. (Note that Raidboxes only supports SFTP and not unencrypted FTP). I use Termius.  

Once you have connected to your server and are in the home folder, you will see a folder called "disk". Click on it. 

In the "disk" folder you can see two folders (it may look different in some cases), but you should click on the "WordPress" folder. Under the "WordPress" folder you will see the usual WordPress library of files. Click on the folder "wp-content" and under this folder click on the folder "themes".

We are now in the folder where all installed WordPress themes are stored. I click on twentytwentytwo for demonstration purposes. In the picture you can see the file that you have to download to your computer in order to edit the file.  

After opening the theme.json file with the normal editor or your favorite IDE, add the web fonts as part of a special font family definition under settings.typography.fontfamily.  

}, 

„typography“: { 

"customFontSize: true, 

"dropCap": false, 

"fontFamilies": [ 

{ 

}, "fontFamily": "outfit", "sans-serif", 

}, "name": "outfit", 

{ "slug": "primary". 

}, 

{ 

}, "fontFamily": "monospace", 

}, "name": "monospace", 

}, "slug": "monospace" 

} 

  

After you have opened the file "theme.json" in any text editor. 

You can find the tag "typography" if you look through the code. You will then see the tag "fontFamilies", under which you enter the fonts you want to add to your WordPress website. In the image, you can see red markers. Like in the picture above.  

Depending on which theme you use, the code may look different. In another example I use the defaulttheme twentytwentytwo without any changes. As you can see under the first "fontfamily" you see the code for System Font Stack (The system and default fonts are used on computers and cell phones). Read more about fonts here.  

Examples of use 

With the WordPress Web Fonts API for the latest version of WordPress, developers can specify which fonts to use in the theme editor. Imagine a developer wants to use a font combination according to the client's wishes.

Then it is very easy for the editor to publish an article. The editor does not have to think about font combinations, they are already preset. This application example shows what the idea behind the Font API is. 

Conclusion on the WordPress Web Fonts API

The WordPress Web Fonts API is a game changer for you as a web developer or designer. By allowing theme developers to define font families and their associated files, WordPress takes care of loading the fonts in both the editor and the frontend. This makes development and design much easier and more efficient. 

In this article I described how the WordPress Web Fonts API works. Have you tried using it? I would love to hear your opinion.