Twenty Twenty-Two is a super flexible and customizable theme that’s perfect for testing out new features like Full Site Editing, Global Styles, and Navigation blocks. It’s also lightweight, making it a breeze to use. However, I never really liked the default Source Serif Pro font that came with it, but with its new capabilities, it’s really easy to add your own and declare them in the theme.json file.

In this post, I’ll show you how I added my favorite font Jay Gothic to the theme.

Uploading your fonts to the theme folder.

To use fonts in the Twenty Twenty-Two theme, you first need to upload the fonts to the fonts directory:

../assets/fonts

For each for you are uploading, create a new folder in the fonts directory. When you created that folder, place all of the files for that font in the newly created folder.’

Declare your fonts in the theme.json file.

Next, you have to let your theme know that you have a new font, and where to look for them.

First In the WordPress dashboard, go to “Tools -> Theme File Editor.” When you open the editor, go to the right-hand sidebar and open “Theme Styles and Block Settings” (theme.json).

Then, scroll down to typography and add the code provided below to specify the font configurations. This will include information about the font family, weight, style, and location of the font files. Remember to change according to your need.

Finally, save your changes.

{
  "fontFace": [
    {
      "fontFamily": "Jay Gothic",
      "fontStretch": "normal",
      "fontStyle": "normal",
      "fontWeight": "400",
      "src": [
        "file:./assets/fonts/jaygothic/jay-gothic-urw.ttf"
      ]
    },
    {
      "fontFamily": "Jay Gothic",
      "fontStretch": "normal",
      "fontStyle": "normal",
      "fontWeight": "200",
      "src": [
        "file:./assets/fonts/jaygothic/jay-gothic-urw-light.ttf"
      ]
    },
    {
      "fontFamily": "Jay Gothic",
      "fontStretch": "normal",
      "fontStyle": "normal",
      "fontWeight": "700",
      "src": [
        "file:./assets/fonts/jaygothic/jay-gothic-urw-bold.ttf"
      ]
    },
    {
      "fontFamily": "Jay Gothic",
      "fontStretch": "normal",
      "fontStyle": "normal",
      "fontWeight": "900",
      "src": [
        "file:./assets/fonts/jaygothic/jay-gothic-urw-extrabold.ttf"
      ]
    }
  ],
  "fontFamily": "\"Jay Gothic\", \"Lucida Grande\", sans-serif",
  "name": "Jay Gothic",
  "slug": "jaygothic"
}

Let’s take a deeper look at what the code does.

The code begins with an object containing a key called fontFace and an array of objects as its value. Each object in the array represents a set of font configurations for a specific weight and style of the Jay Gothic font.

Each object in the array contains the following keys and values:

• fontFamily: This specifies the name of the font family. In this case, it is “Jay Gothic”.
• fontStretch: This specifies the font stretch, or how much the font is stretched horizontally. In this case, it is “normal”. Other values may include “condensed”, “expanded,” or even a percentage.
• fontStyle: This specifies the font style, such as normal, italic, or oblique. In this case, it is “normal” for all objects in the array.
• fontWeight: This specifies the font weight, or the thickness of the font. In this case, the weights are 400, 200, 700, and 900.
• src: This specifies the location of the font file. In this case, the font files are located in the ./assets/fonts/jaygothic directory.

The object also includes a fontFamily key with a value of Jay Gothic, Lucida Grande, and sans-serif. This specifies that the Jay Gothic font should be used, but if it is not available, the browser should fall back to using Lucida Grande, which is a similar font natively installed on either Windows or macOS. If Lucida Gothic is not available, the browser should use any available sans-serif font.

Finally, the object includes a name key with a value of Jay Gothic and a slug key with a value of jaygothic. These are used to specify the name shown in your WordPress Site Editor and slug for the font.

Go to Site Editor and check for your result.

If everything is done right, you should be able to see a new option called Jay Gothic when you select fonts for your text.

Final thoughts.

Adding a custom font to the default theme is a fairly complicated process. It requires altering the code files, which may lead to broken themes if it’s not done correctly. However, having the ability to customize the theme is still a good thing.