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.