Support » Themes and Templates » Twenty Eleven » [Resolved] Change fonts for entire Twenty Eleven site

[Resolved] Change fonts for entire Twenty Eleven site

  • Hi
    I’d like to change the font families and sizes for all H1, H2 …p tags etc for all posts and pages on the site.
    Please can anyone help with where to do this? (I am working on a child theme of twenty eleven).
    Many thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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!

    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


    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,

    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


    Great tutorial here for anyone else who’s looking

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Change fonts for entire Twenty Eleven site’ is closed to new replies.
Skip to toolbar