By default the ska-theme h1-h6 headings use Tailwind 4xl to lg sizes and also include some fluidity for h1-h3 as these elements tend to take up quite a lot of space on mobile devices otherwise.
To change the default values you can edit the child theme’s theme.json to include the following:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"styles": {
"elements": {
"h1": {
"typography": {
"fontSize": "var(--ska-font-size-3xl)",
"lineHeight": "var(--ska-font-size-3xl-lh)"
}
},
"h2": {
"typography": {
"fontSize": "var(--ska-font-size-2xl)",
"lineHeight": "var(--ska-font-size-2xl-lh)"
}
},
"h3": {
"typography": {
"fontSize": "var(--ska-font-size-xl)",
"lineHeight": "var(--ska-font-size-xl-lh)"
}
},
"h4": {
"typography": {
"fontSize": "var(--ska-font-size-lg)",
"lineHeight": "var(--ska-font-size-lg-lh)"
}
},
"h5": {
"typography": {
"fontSize": "var(--ska-font-size-base)",
"lineHeight": "var(--ska-font-size-base-lh)"
}
},
"h6": {
"typography": {
"fontSize": "var(--ska-font-size-sm)",
"lineHeight": "var(--ska-font-size-sm-lh)"
}
}
}
}
}This particular code uses a step smaller values for headings, but you can edit them as needed.
Since they are variables, editing the Tailwind configuration for these values can also alter heading sizes along with other places these values are used.
Headings font family, weight and letter spacing can be edited normally from theme options ska-theme -> Typography.
To use a different font family, you would first need to add it to ska-tailwind -> Typography -> Font family, by either adding a remote font to an existing family like sans or creating a whole new font option and then using it from ska-theme -> Typography.
Color defaults to the “heading” value in the Site palette under ska-tailwind -> Colors -> Theme palette.
