How to Add Custom Fonts to a WordPress Theme

Photo by Brett Jordan on Unsplash

When building your first word press site, the first thing you want to do is apply your branding style guide, with all your custom fonts.

There are many blogs on this topic. The below site demonstrates 3 different ways; -

• https://wordpress.com/support/custom-fonts/

Methods; -

• Change Fonts in the Site Editor
• Change Fonts in the Page Editor
• Change Fonts in the Customizer

In practice, with word press 6.5+ not all methods work.

This article will show you how i changed fonts.

Change Fonts in the JSON Theme Styles File

Locate your theme root directory. It should contain the below structure; -

> ls twentytwentyfour
styles
  ice.json
  ...etc
style.css
theme.json

Edit the theme.json file.

Add your custom font like below.

 ...
 "typography": {
   "fluid": true,
   "fontFamilies": [
    {
     "fontFace": [
      {
       "fontFamily": "Caveat",
       "fontStretch": "normal",
       "fontStyle": "normal",
       "fontWeight": "300 900",
       "src": [
        "file:./assets/fonts/Caveat/Caveat-VariableFont_wght.tff"
       ]
      }
     ],
     "fontFamily": "\"Caveat\", sans-serif",
     "name": "Caveat",
     "slug": "site-logo"
    },
...

Make sure you upload your font to the assets folder, and that the font URI exists.

When using this option you may have to refresh your theme styles page.

Only use the styles/ice.json location to override the base styles.

Change Fonts Using Site Builder’s Theme Styles

On the word press dashboard go to; -

• Appearance>Editor>Styles>Edit Styles>Typography>Manage Fonts

Here you can upload your custom fonts and access it via the site builder.

When using this option you may lose your custom styles, and site builder modifcations, if you choose to rename your theme.

Have fun customizing your site’s fonts locally.