Change fonts for entire Twenty Eleven site

Hi Vickie,

Just copy and paste the following code into your child theme’s stylesheet and edit accordingly:

body, input, textarea {
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

By changing the 15px to a higher or lower number you’re affecting all text on the site, since everything (including headings) are derived from this value.
You’ll also need to change the font-family to whatever one you wish to use, e.g.:

body, input, textarea {
	font: 12px "Times New Roman", Times, serif;
}

Hope this helps!
Tony.

Hi Tony

Thanks for the super fast reply …it works but unfortunately I didn’t explain well
what I was trying to achieve. My aim is to have for example

H1 Times New Roman font 16
H2 Helvetica font 14
H3 Ariel Font 12
etc etc
p Helvetica font 11

Sorry for explaining badly, but hope you’ll be able to help again… ??

Thank you

Vickie

Hi Vickie,

Changing the headings individually is slightly more involved because they tend to be sized specifically for the area they appear on the page.

For instance the H1 heading used for the site name has a class of site-title and is 36px, whereas the H1 heading in the main content area is also 36px but has a class of entry-title, so you need to alter the pixel sizing in two places.

Therefore you will need to inspect the headings location, find out what class definition is styling it and then duplicate that styling in your child theme with your altered declarations.

What browser are you using?
I use Firefox with the FireBug add-on installed. This add-on allows you to select a specific part of the web page and inspect what styles are being applied to it. That way it’s easy to refer to the default Twenty Eleven stylesheet, even down to the specific line on which the style occurs, and duplicate it into your own child stylesheet making any alterations accordingly.

Sorry I can’t give you a direct reply but for this theme it’s not simply a case of being able to style all headings en-mass.

All the best,
Tony.

Hi Tony and thanks again!

I’ve had a look based on what you’ve said and think I understand the a bit more now (I also use Firefox/Firebug).

As a compromise we may leave all the sizes unchanged but are really keen to change the font type for H1, H2 and H3 for the whole site. Would this still require individual styling for each class based on where it’s used or is there an en-mass place I could do it? (hopeful)

Many thanks for helping

Vickie

Great tutorial here for anyone else who’s looking
https://voodoopress.com/2011/07/playing-with-fonts-on-a-twentyeleven-child-theme/