Twenty Twenty Two Font Control

Good questions. I can only help you with custom css, you will find it here https://your-domain.com/wp-admin/customize.php

I used this plugin for custom fonts: https://dineshkarki.com.np/use-any-font
Works great.

There was the promise that child themes and css files would be a thing of the past with the new Style editor, but go there and it is so sparse.

Hi,
Did you find a solution to change font in TT2 (child theme for me), without plug-in of course?

I would like a solution for this too! I tried setting up a child theme with a json file that covered the fonts. But no luck.

I was able to add a child style.css file and that recognised my custom CSS. However it almost seems like my theme.json is not being observed. This is my child theme.json:

`{
“version”: 2,
“settings”: {

“typography”: {
“dropCap”: false,
“fontFamilies”: [
{
“fontFamily”:”Roboto,\”Helvetica Neue\”,sans-serif”,
“name”: “System Font”,
“slug”: “system-font”
},
{
“fontFamily”: “\”IBM Plex Sans\”, sans-serif”,
“name”: “IBM Plex Sans”,
“slug”: “ibm-plex-sans”,
“fontFace”: [
{
“fontFamily”: “IBMPlexSans-Light.woff2”,
“fontWeight”: “400”,
“fontStyle”: “normal”,
“fontStretch”: “normal”,
“src”: [ “file:./twentytwentytwo/assets/fonts/ibm-plex/IBMPlexSans-Light.woff2” ]
}
]
}
],
“fontSizes”: [
{
“size”: “1rem”,
“slug”: “small”
},
{
“size”: “1.125rem”,
“slug”: “medium”
},
{
“size”: “1.75rem”,
“slug”: “large”
},
{
“size”: “clamp(1.75rem, 3vw, 2.25rem)”,
“slug”: “x-large”
}
]
},
“layout”: {
“contentSize”: “960px”,
“wideSize”: “1000px”
},
“styles”: {
“blocks”: {
“core/post-title”: {
“typography”: {
“fontFamily”: “var(–wp–preset–font-family–ibm-plex-sans)”,
“fontWeight”: “300”,
“lineHeight”: “var(–wp–custom–typography–line-height–tiny)”,
“fontSize”: “var(–wp–custom–typography–font-size–gigantic)”
}
},
}
}
}
}

Actually my child style.css is ignored too. I followed the steps shown here See https://kinsta.com/blog/twenty-twenty-two-theme/#extending-twenty-twentytwo-with-a-child-theme but not luck.

Hi Saturn3,

I also dream of a more free font control in Twentytwentytwo. Here and now it is very difficult to change the fonts. A thing like that ought to be easy. The ordinary user would probably give up if they are to fight with weird looking json.

As an alternative to a child theme you could create a theme from scratch. Just copy the folder and paste it under another name. Then you can change the style.css informations with the theme name etc.

The upside of such a solution is the freedom from the original theme. Updates won’t overwrite your work. The flipside of the coin is – you don’t get the brand new updates here.

But in theory you should be able to have a separate theme json file inside the childtheme folder.

I don’t have an answer for the “change the base font” issue other than use a child CSS. This works for me BUT not in the admin interface — which is an issue as I need to hand off my sites to people less technically literate than I and it throws them to see fonts the public site doesn’t use. As others noted, using a theme.json in my child folder has no effect.

HOWEVER, a few people mentioned that their child.css files are being ignored. Make sure your child theme folder has been created properly… it’s changed with FSE.

I used a WP supplied plugin called ‘Create Block Theme’ and then modified the result. Works like a charm (except for the theme.json).