Wordpress Font API: How To Use The Wordpress Font API

Simple Guide to the WordPress Web Fonts API

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 an API anyway?

An interface is called an application programming interface (API). This means that you let programs communicate with each other so that they can exchange data in a limited and controlled way.

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:in or designer:in. 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 into the core with WordPress 6.0. "The fact that it has taken 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 optimisations can be built on top of it to ensure that WordPress provides the best possible experience (and privacy) for end users.

Consent*
This field is for validation and should not be changed.

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, developersalso needed to be able to specify which fonts should be used on the sitein 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.

An application scenario: 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 synchronised 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 keys and values of the theme.json mostly correspond to the CSS @font-face rule. If you don't know them, you should refresh your knowledge. The @font-face rule is a CSS style that allows you to 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. 

Wordpress Web Fonts Api

In the "disk" folder you will see two folders (this 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 on the folder "themes".

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

Wordpress Web Fonts Api

After you have opened the file "theme.json" with the normal editor or your favourite 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. 

Wordpress Web Fonts Api

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

Wordpress Web Fonts Api

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

Examples of use 

With the WordPress Web Fonts API for the latest version of WordPress, developerscan specify which fonts to use in the themeeditor. 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:in or designer:in. By allowing themedevelopers 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.   

Your questions about the WordPress Web Fonts API

What questions do you have for Noel? Feel free to use the comment function. You want to be informed about new postson the topic of online marketing? Then follow us on Twitter, Facebook, LinkedIn or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published.