Setting Font Sizes in theme.json
-
I first posted this theme in the Blockbase support forum because I am using the Blockbase theme. I was told that this isn’t really a Blockbase-specific issue, but rather related to how block themes in general work.
I am interested in replicating the font-sizing that I currently have on a traditional theme in a child theme of the BlockBase theme, building from a base font size for a paragraph block up through the heading font sizes, h1 through h6. I understand that this will involve messing around with theme.json in the child theme. I have read a lot about theme.json and have poked around gingerly, but I can’t figure out how font size works. Specifically, I can’t figure out how I can set a base font size and then make that definition the basis for all the other font sizes.
Ideally, I would like to set a base font size to 15px and then use em/rem settings for the rest of the font sizes.
I can see where font sizes are defined under settings/custom/typography/fontSizes, e.g.
{
“name”: “Extra Large”,
“size”: “32px”,
“slug”: “x-large”
}And I can see where that gets referenced in the definition for h2.
“h2”: {
“typography”: {
“fontSize”: “var(–wp–preset–font-size–x-large)”
}
}What I don’t see is how to set up the base font size that I can use to define the various other sizes. Can I get any help with that?
-
I noticed that in the settings it will create a preset for each of the fonts family created. You will still have to enqueue the fonts in the functions.php before registering them in the theme.json file. I’ve noticed that if you add them in the settings section you may or may not get a drop-down to select a font. Some blocks will give it but others will not. I don’t think the h1..h6 or the paragraph blocks will give you the option to select a font family. Maybe that will change in the future. When styling for blocks I think you will have to do it with the preset created in the style section of the theme.json. You can use the presets to set the font family for each block in the style section.
Like you, I’ve played with it but found that most blocks don’t seem to support it as of yet. I’ve seen a few blocks where it seems to give you that options. But, I think it would be great if you select font families by block types in the blocks themself.
- The topic ‘Setting Font Sizes in theme.json’ is closed to new replies.