Fonts in theme.json

Fonts in theme.json

How to add fonts to a WordPress theme in the theme.json or style.json. Here is the JSON.

Place this object in in settings.fontfamilies:

"fontFamilies": [{
  "fontFamily": "PermanentMarker",
  "name": "PermentMarker",
  "slug": "PermanentMarker",
  "fontFace": [{
  "fontFamily": "PermanentMarker",
  "fontWeight": "400",   "fontStyle": "normal",
  "fontStretch": "normal",
  "src": ["file:./assets/fonts/Permanent_Marker/PermanentMarker-Regular.woff2"]
  }]
}]

The file format .woff2 is recommended, however you can have fallback files in the array with the path to the font-file.

Bug (WP 6.4.2)

However, there is a bug in WP 6.4 – if you try to use this font in headings you cannot save it. I hope that this will be corrected soon. You can use the font in the Gutenberg editor, but not assign the font to the headings.

Here I add the font:

The font is visible in the editor. However, as soon as I press “save” the font is gone! And everything is back to “normal”:

Bug Report

Here is the bug report in Trac.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close