Topic: Customizer Typography Sizes

Webkiter
May 25, 2026 at 7:12 am

Hi there,

to my mind it is logical to set the global typo sizes in the WordPress Customizer.
Although I defined sizes for H1, H2, H3 etc. for Desktop, Tablet and Smartphone these settings don’t take place on the front end. I always have to set the typo sizes when creating individual pages.
That leads to different heading sizes on every single page which isn’t what I am looking for.

Also…
Although I defined the button in the hero section with white background and a black border it shows up as black with blue typo. Really strange.

How can I fix that?

Thanks in advance!
George
May 25, 2026 at 7:15 am

Hello,

If the headings have local or global styles those will take precedence. Can we see a URL so we can advice better?
Webkiter
May 25, 2026 at 7:28 am

Hi George.

thank you – I added the link and password.

Also this:

Although I defined the button in the hero section with white background and a black border it shows up as black with blue typo. Really strange.

Thanks for your help!
George
May 25, 2026 at 7:42 am
Thanks for the details.

The Customizer typography settings work as a baseline, but they’ll be overridden by anything set at the block level. Looking at your CSS output, the H1 has font size set directly in Global Styles (font-size: 50px), and the H2 has it set as a local block style (font-size: 42px on .gb-text-27899498) — which is why the Customizer values aren’t taking effect on either.

To get consistent heading sizes across the site without setting them per-block:
- Go to GenerateBlocks → Global Styles and check whether you have heading typography defined there — clear any font size values set there.
- On individual blocks, open the Typography panel and remove any locally set font sizes.
Once those overrides are removed, the Customizer settings should apply sitewide as expected.

As for the button: the black background is coming from .gbp-button–primary in Global Styles, and the blue text is being applied by your theme’s .inside-article a { color: var(--links) } rule — overriding the white color you set locally on the block. To fix this:

1. In GenerateBlocks → Global Styles, update the .gbp-button--primary style to set the background and text color you actually want as the default.

2. Check in Customizer -> Colors -> Content and remove any link colors, those usually create problems!
Webkiter
May 25, 2026 at 8:09 am
Hi George,

that’s interesting.
Thanks for your help.

Who put those settings there?
Can I simply delete them? I didn’t find out on how to change the css . I can read the css but clicking on the little pencil icon only let me change the name of the css class but not the content itself.

I tried to make the changes. Deleting the link color didn’t change the color on the front end.

The gbp button primary css shows the colors I want them to be:
```
.gbp-button--primary {
    background-color: #000000;
    border: 1px solid;
    color: #ffffff;
    display: inline-flex;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none
}

.gbp-button--primary:is(:hover,:focus) {
    background-color: #000000;
    color: #ffffff
}
```
Still on the front end no changes….

Any ideas?

Thanks again for your help!
Webkiter
May 25, 2026 at 8:13 am

Maybe can you have another look?

I think it works now.

But I wasn’t able to find the global settings for the heading sizes.
I suppose there aren’t any defined globally.

Anyways.
Thanks a lot for your efforts.
Ying
May 25, 2026 at 9:41 am

Hi there,

The gbp-button–primary is using the CSS you wanted to apply now.

The H1 font size is defined in the theme. If you want to change it, you can do so at customizer > typography. If it’s not defined yet, you can click the Add typography button and select h1.
https://app.screencast.com/gElgsrGDDdKP1

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.