Variable fonts in WordPress theme.json

README.md

Variable fonts in theme.json

Implementing variable fonts in theme.json can be tricky, but all you need are these things:

1. A variable font in woff2 format (other formats are available but if you only have one, this is best)
2. The font weight range (ie. thinnest to thickest values)
3. The font variation settings (what you'd set via ont-variation-settings in CSS)

Now you can define different font families using the same font file in yout theme.json!

Standard version:

{
  "fontFamily": "Recursive, sans-serif",
  "name": "Sans-serif",
  "slug": "sans-serif",
  "fontFace": [
    {
      "fontFamily": "Recursive",
      "fontStyle": "auto",
      "fontWeight": "300 900",
      "src": [
        "file:./assets/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.woff2"
      ]
    }
  ]
}

Cursive version:

Note that there is a fontVariationSettings value you can set.

{
  "fontFamily": "'Recursive Cursive', cursive",
  "name": "Cursive",
  "slug": "cursive",
  "fontFace": [
    {
      "fontFamily": "Recursive Cursive",
      "fontStyle": "auto",
      "fontWeight": "300 900",
      "fontVariationSettings": "'CASL' 1, 'CRSV' 1",
      "src": [
        "file:./assets/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.woff2"
      ]
    }
  ]
}

theme.json

{
	"$schema": "https://schemas.wp.org/wp/6.1/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "Recursive, sans-serif",
					"name": "Sans-serif",
					"slug": "sans-serif",
					"fontFace": [
						{
							"fontFamily": "Recursive",
							"fontStyle": "auto",
							"fontWeight": "300 900",
							"src": [
								"file:./assets/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "'Recursive Cursive', cursive",
					"name": "Cursive",
					"slug": "cursive",
					"fontFace": [
						{
							"fontFamily": "Recursive Cursive",
							"fontStyle": "auto",
							"fontWeight": "300 900",
							"fontVariationSettings": "'CASL' 1, 'CRSV' 1",
							"src": [
								"file:./assets/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.woff2"
							]
						}
					]
				},
				{
					"fontFamily": "'Recursive Monospace', monospace",
					"name": "Monospace",
					"slug": "monospace",
					"fontFace": [
						{
							"fontFamily": "Recursive Monospace",
							"fontStyle": "auto",
							"fontWeight": "300 900",
							"fontVariationSettings": "'MONO' 1",
							"src": [
								"file:./assets/fonts/Recursive-VariableFont_CASL,CRSV,MONO,slnt,wght.woff2"
							]
						}
					]
				}
			]
		}
	},
}