0

Is there a way to globally change the font size for Heading 1, Heading 2, Heading 3, etc. So, for example, if I want to change the font size for everything tagged with H2, every H2 text size on every page in the site changes.

Thank you.

2

Sure, locate the style.css file within your theme and paste the code below. I suggest using percentages in your declarations so as to keep the base size styling hopefully already in your theme.

h1 { font-size: 150%; }
h2 { font-size: 140%; }
h3 { font-size: 130%; }
h4 { font-size: 120%; }
h5 { font-size: 110%; }
1

Depends on the theme you are using, some themes have general settings panel labelled as Theme Options where you can change general & global settings like skins, typography etc. If you don't have any theme option panel do it with css: h1{ font-size: 24px;}, if css doesn't work apply !important tag to change it forcefully h1{ font-size: 24px !important;}, h2{ font-size: 20px !important;} etc...

  • I appreciate your spelling that out for me. I launch in a few days so I'm not going to screw with it now. Thanks again for your help. – Louie Dec 29 '17 at 0:50
  • Pleasures, although style.css file's backup will help you revert the change in case of any mishap, you're just testing the heading styles which can be reverted easily, shouldn't be a big deal. You an also create a test version of your live website somewhere else on test domain OR in your own local pc, to see the effects of changes without disturbing the live website. – Arsalan Mithani Jan 4 '18 at 12:51
1
+50

Of course.

Within your styles.css file, simply change the tag that you require as follows:

h1 {
    font-size: X px;
}

Now, if only it was that easy, right?

Here are a few things you need to take care of:

1) Plugins

The way plugins work is that they sometimes play with these settings too and based on which property loaded the last, that'll be your setting!

Check this out:

If styles.css had the declaration of

h1 { font-size: 12px; } but along comes a plugin that loads some other CSS and says h1 { font-size: 14px } guess what happens?

The h1 now has a font size of 14px.

The only real way to ensure your styles will always over-write anything else is to either declare them via JS, which has a post-css execution script, meaning it executes after CSS, but this will be over-kill in terms of performance or simply make sure you manage your rules correctly.

Additionally, you can use the !important declaration in your styles.css file, but I find this hacky, due to:

2) User Changes

If you plan on having a dynamic theme and you allow users to change your ,<h1> size with set_option, you'll have issues unless you also declare that with !important.

Hope this helps.

1

It may not be the best solution to change these elements directly. For example, some themes like Automattic's own _s use a conditional to display the post/page title or site title.

For example, if you're on the site's index page, then the site title may be <h1 class="site-title">Site Title</h1> where as on a single post it might be <p class="site-title">Site Title</p> because on that particular page, the post title is more important.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.