Hey @dkdivedude,
Thank you for reaching out!
The options that are available under Appearance -> Customize -> Typography -> Headings control the typography settings site wide. To customize the header font sizes on single posts, I would recommend going to Appearance -> Customize -> Blog -> Single Posts -> Style -> Post Title Size as shown in this screenshot.
For modifying any other heading sizes on the blog posts, you would need to use CSS custom styles and I would be happy to help. To get this going, would you mind sharing a link to the page you would like to modify and the titles?
Thank you!
Changing the header font size on Appearance -> Customize -> Typography -> Headings page does absolutely nothing!
The following link is an example of a post from my website; https://dkdivedude.com/2026/01/01/review-joyo-d-seed-ii/
I had to resort to custom CSS to set header font sizes;
h1.wp-block-heading {font-size: 1.5rem !important;}
h2.wp-block-heading {font-size: 1.4rem !important;}
h3.wp-block-heading {font-size: 1.3rem !important;}
h4.wp-block-heading {font-size: 1.2rem !important;}
h5.wp-block-heading {font-size: 1.1rem !important;}
h6.wp-block-heading {font-size: 1.05rem !important;}
Hi @dkdivedude
I’m glad to hear that you were able to workaround this and generate the CSS.
I’ve tested out the typography settings on my end and they seem to work as expected on my end as shown in this screencast.
Is it possible that you have some other custom code on your theme that are overriding these settings?
Thank you!
I don’t think so, see my custom CSS in its entirety;
.title-post.entry-title {font-size: 1.5rem !important;}
h1.wp-block-heading {font-size: 1.5rem !important;}
h2.wp-block-heading {font-size: 1.4rem !important;}
h3.wp-block-heading {font-size: 1.3rem !important;}
h4.wp-block-heading {font-size: 1.2rem !important;}
h5.wp-block-heading {font-size: 1.1rem !important;}
h6.wp-block-heading {font-size: 1.05rem !important;}
li {margin 0 !important; padding: 0 !important}
.tag-cloud-link {margin:0 !important; padding: 0 !important;}
.comment-respond {
background-color: #000040;}
Hi @dkdivedude
Thank you for getting back to me.
I’ve created a new install that uses the block editor similar to your site but I could not replicate the issue. Previously I was testing with a site that uses the Elementor page builder. By inspecting your page, I noted that when I remove the CSS rules that you have added that contain the !important rule, the custom font-sizes are applied successfully.
Would you be in a position to test if you can still reproduce the issue on a fresh install?
Thank you!
