fonts

Playing With Fonts on a Twentyeleven Child Theme

I had a question come up here on VoodooPress about working with fonts in a child theme. How to set them, how to change theme, how to target specific elements, etc. Fonts can be a quick way to add a unique flavour to your theme. Let’s take a look at how to do some cool things with fonts!

So the first thing we need to understand is font stacks, and how they apply. Let’s take a peek into twentyeleven’s style.css.

body, input, textarea {
	color: #373737;
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

Here’s the first font stack we run into in twentyeleven. The first thing to look at is what it applies to. We can see the selectors body, input, textarea. Your entire site is wrapped in the body class. So this font stack will apply to everything originally. Later in the css more specific fonts are applied to other elements.

UPDATE: For those of you trying to use Google fonts using the @import rule, please scroll down to the comments, and check out this article. I just figured something out that may help you through a lot of heartache!

The next thing to look at is the stack itself. “Helvetica Neue”, Helvetica, Arial, sans-serif. Here’s how they stack works. For a font to work, it must exist on the users computer. Not your computer, the person looking at the site. There are workarounds we will get to in a minute. The browser attempts to load the display font in the order they are listed. So it first attempts to load Helvetica Neue, if that isn’t present, it tries to go with Helvetica, then Arial, and finally the default sans font. One thing to notice is the quotes around Helvetica Neue. That’s just there because that font has a 2 word name. Anytime you have a multi-word font name, wrap it in quotes. You should always end a font stack with either sans-serif or serif. So you can specify the styly of font for a person with no fonts on their computer.

The rest of that info is pretty self explanatory, setting a colour for the font, a weight, and the line height.

So now what if you want to use some fancy fonts for your web site, and want to make sure your end user sees that font? As we already discussed, if they don’t have the font on their computer, they won’t see the typography as you planned. Well, there are many options for hosting your own fonts. But I’ll be honest, it’s a pain. My advice is to stick with the simplest fix, and that is Google Fonts.

Here’s how it works. You cruise around the site, find the font you want, and import it into your css and then add it to your font stack. Dead simple. So I use a couple of custom fonts on my site. I use one called Arimo which I found on there. To be able to use the font, we need to load it in, that’s done in your style.css like this:

/*
Theme Name:     Voodoo Child 2011
Theme URI:      http://www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
Description:    Child theme for the Twenty Eleven theme
Author:         Rev. Voodoo
Author URI:     http://www.rvoodoo.com
Template:       twentyeleven
Version:        0.1.0
*/
@import url('../twentyeleven/style.css');
@import url('http://fonts.googleapis.com/css?family=Crimson+Text');
@import url('http://fonts.googleapis.com/css?family=Arimo');

You can see that’s my child theme’s style.css header. We have all the normal stuff for a child theme. We then have the import rule to bring in twentyeleven’s style.css. Under that is 2 examples for bringing in some custom fonts. I wanted to show a single and double word font name. Remember up above we talked about quotes around a 2 word font name? Well You would still do that in the font stack. Google just needs them to be joined by a plus(+) sign when importing them.

So now we have our font imported, but it’s not applied to anything yet. Here’s how to do that.

body, input, textarea {
	color: #373737;
	font: 15px Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

Easy right? I just copy over the css rule above, and edit the line I want to change. I just popped my custom font in front of the stack. You can change the entire stack if you want, but I didn’t need to.

OK, we’ve got the custom fonts, and font stacks figured out. Let’s get a little more specific. We can work with some titles. If you cruise around twentyeleven’s style.css you’ll see there is not a lot of font styling! It’s pretty bare. That keeps the theme uniform, and simple. So what styles the headers (h1, h2, h3, etc)?

Well, as a general rule, they are often styled by the browser. Twentyeleven sets the font of the headers by setting the font of the body, which we showed earlier. That font rule holds true unless something more specific is set later. If no font sizes are set, the browser will determine them. So if you want to get more detailed, here’s some tips. You can, of course, just add the headers to your style.css and define them.

h1 {
     font: rule;
     size: 35px;
}
h2 {
    font: more;
    size: 25px;
}
h3 {
    font: wheeee;
    size: 15px;
}

And that will change up the header styling. You can change up the fonts, add underlines, colours, etc. But, that will affect all the headers of that size throughout your site. Maybe that is what you want, or maybe you need to be more specific. Perhaps you are looking to just affect the site title, or the widget h3 title, or only post h3 title, or only the post header on a page, or an h3 title in the body of a post, on a single view only. Well, that’s all about the proper specificity with your css. The selectors you use, and the order you use them in your stylesheet matter! I’m not going to give a huge css lesson here, if these concepts are new to you, read some Google tutorials around the web, or better yet, get yourself a 1 month subscription to lynda.com. I seriously learned a load from that site when starting out.

The first thing I’ll recommend is you use a developer tool of some sort. There’s the firebug addon for firefox, or chrome has builtin developer tools. These things allow you to point to pages to see what css selectors are available.

The next important thing is the body class. That is vital for picking out css selectors specific to the home page, or a page, or a single post view. Just do a view source to see your source code in the browser, and scroll past the head information to see all the body classes. For instance, here is the body classes for a single post view here on VoodooPress.

</head>

<body class="single single-post postid-617 single-format-standard logged-in admin-bar single-author two-column right-sidebar">
<div id="page" class="hfeed">
	<header id="branding" role="banner">

If we add those specific body classes to our css, we are able to target elements on specific pages and templates very easily.

So I obviously can’t cover every situation here. But I’ll give some examples. First up, we can change the font of the site title, on single post views only:

.single h1#site-title {
     font: rules;
}

You can see we use the .single body class to apply to only single post views. But .single h1 would apply to any h1 on the page. We just want the site title, so we check the source code and see that the title has the ID of site-title, and we add it on there to ensure we are targeting only the h1 for the site title.

Next up, let’s look at the h3 heading. We will look at the selectors for the h3 on a single page, but remember, you could have an h3 in the body, or an h3 for widget titles.

.single h3 {
     font: rules;
}
.single h3.widget-title {
     font: rules;
}

You can see we set all the h3 first. Put your rules here for the general h3 headings in your post. Then we get more specific and apply a different rule to the widget title. In your css, general rules come first in your stylesheet, and more specific ones go below.

Maybe in single post view, you want to specify a more dramatic difference between the posts title, and an h1 in the content of the post. These would both be h1.

.single h1.entry-title {
     font: rules;
}
.single .entry-content h1 {
     font: rules;
}

You can see there we first target the title, and then any h1 headings within the actual content of the post.

As a contrast, let’s look at a page. Here’s the body class:

</head>

<body class="page page-id-610 page-template-default logged-in admin-bar single-author two-column right-sidebar">
<div id="page" class="hfeed">
	<header id="branding" role="banner">

So if we wanted to style h1 titles on any page, we would use the .page body class. But let’s get even more specific.

.page-id-610 h1.entry-title {
     font: rules;
}

This particular code would only affect the title of the page on page ID 610, which happens to be my About Me page.

Hopefully this gives you some info so you can go play with your fonts a little. Remember you can’t always just copy rule from twentyeleven and make edits. You may have to write your own rules. Like in my examples above, twentyeleven doesn’t have a pre-established rule for the font stack of the widget title on a single view. So if you wanted to target that, you’d have to add your own rules to your child theme.

The main thing here is to understand the body class, and specificity. Once you get a handle on that concept, it’s pretty easy to tweak fonts, and any css, to your heart’s content. I know I’ve only just given a very brief overview here. If you have further questions just ask!!

52 thoughts on “Playing With Fonts on a Twentyeleven Child Theme”

  1. Thanks so much for this, much appreciated!! :) I’ll have a play with my child theme …and spend some time learning a bit of CSS!

    So glad I found this site and definitely recommend it to anyone especially if you’re looking to customise twenty eleven.

  2. Hi! Your site has really been a huge help, but I had a question about something in this post. I want to change the font size on only one page, and I entered the following code into my stylesheet, based on your suggestion in this post on how to achieve this:

    .page-id-53 .hentry {
            font-size: 17px;
    }

    But it’s not working. I’m trying to change the font of the body text, not the heading. Do you have any idea what I’m doing wrong? When I inspected the page, it looks like the rule for .singular.page is overriding it, but I don’t know how to fix this.

    1. Hiya, down towards the bottom of my post, where I show how to affect a single page title, my code looks similar to this:

      .page-id-73 .entry-title {
      	font-size: 36px;
      }
      

      I just tested it, and it works to affect only the title of that page. Using .hentry in your css targets the entire post, as .hentry is part of the post class for the post wrapper.

  3. Thanks you! this tutorial is awesome. I’m just getting to grips with child theming twentyeleven and I’m no css expert, but now, thanks to your careful, non-jargon, explanation I feel I at least have a chance of managing the fonts. Can you do more on working with Twentyeleven please?

    1. Sure, there are a bunch of tuts on here related to 2011, and the ones geared towards 2010 will also work pretty easily. If you have any specific things you are looking to do, feel free to mention it here. I’m pretty busy, but I try to work through anything my readers are looking for if I can! Thanks for the awesome comment!!

  4. Hi Rev.voodoo. I think this is a generic query but I can’t find any help (partly because I don’t know the correct jargon). I’m using twentyeleven and have set up a child theme. I need to set the home page to have an editable text area above a list of recent posts. So combining a static page and a posts page. Can you advise? And thanks for so much great material on working with the twentyeleven theme, I’ve grown in confidence and ability hugely in just one day.

    1. I can set you toward the resources right now, and maybe get something better together for you soon if you can’t get there from here. To do what you need, you would need a page template.
      http://codex.wordpress.org/Pages#Page_Templates

      It would need to be a copy of page.php. With the header added per that link. Under the call to get_template_part you would need to run a second loop, querying whatever posts you want listed under the editable portion.
      http://codex.wordpress.org/The_Loop#Multiple_Loops
      http://codex.wordpress.org/Function_Reference/query_posts
      http://codex.wordpress.org/Class_Reference/WP_Query

      You would then make a new page, assign it this new template from the attributes dropdown in the edit page page, and the set it as your static front page in settings->reading.

      The editable area would be filled out when you make your new page, it would act just like a normal page. The lists of posts would be determined by your secondary loop and query.

      This new file would obviously be saved in your child theme.

  5. Hi there, thanks for this great post. I am having a hard time getting the h1, h2, and h3 tags to show up as different sizes. I have created a child theme and added the following code:

    h1 {
    font: Arial, Helvetica, sans-serif;
    size: 25px;
    }
    h2 {
    font: Arial, Helvetica, sans-serif;
    size: 18px;
    }
    h3 {
    font: Arial, Helvetica, sans-serif;
    size: 14px;
    }
    however the h1, h2 and h3 tags still look the same throughout the site. Can you help me? I don’t know what else to do and I think that I may have missed something important.

    1. Sure I can help. First up, what theme are you working on? If 2010 or 2011, have you made a child theme? I hope so!! Next up, you don’t need to set your font for every element. I can try to make some suggestions here, but I’m not sure what you are doing. If you want your whole site to be Arial, Helvetica, Sans, you can apply that to the body tag. Then everything gets that. If you want that font stack for just certain elements, put them all together for that rule. Less characters in your css is better. Also, the main problem, you are combining css shorthand and longhand. You either use font-size and font-family, or font, with all attributes. So

      h1, h2, h3 {
           font-family: Arial, Helvetica, sans-serif;
      }
      h1 {
           font-size: 25px;
      }
      h2 {
           font-size: 18px;
      }
      

      And so on. Or, shorthand font rules look like:

      h1 {
           font: 25px Arial, Helvetica, sans-serif;
      }
      h2 {
           font: 18px Arial, Helvetica, sans-serif;
      }
      

      And so on…. does that help at all?

      1. Thanks so much for replying! I am working on 2011 (www.fultonmassagetherapy.com) and I do have a child theme. I don’t particularly want to change the actual fonts, I just thought that I had to put the font name there… I am happy with the fonts, just want to be able to change the sizes of the h1, h2, and h3 so that they are not all the same size like they are now. When I put the code above in the child style.css and upload it, nothing happens. The h1, h2 and h3 stay exactly the same. I must be missing something here… Any thoughts?

        1. So we need to get more specific I guess. Which headings do you want to change? All of them? For instance, for all the post titles, if I put

          .entry-title a {
          	font-size: 40px;
          }
          

          It makes them pretty huge. If you want to target the headings you apply inside of your post content, you would target:

          .entry-content h3 {
          	font-size: 22px;
          }
          

          So to be able to work it through, we need to know what headings, and where, to be specific enough!

          1. It is, but with some work! dong the entry-title one I showed should take care of most titles. doing entry content h1 through h6 will take care of any headings in your content. And .widget-title will target, well, widet titles. We have to get specific because 2011 applies differnt sizes specifically, so we have to override those. Once you have those all in place, you can look into any stragglers. If you don’t already use it, firebug addon for firefox (or Chrome browser has dev tools built in) will allow you to inspect elements on a page, to see what css applies and help you write your own rules in your child style.css.

  6. You have already been such a great help to me, I wonder if I could ask you again… I am trying to do two things without much luck. First I want to change all the headings on my right widget to black and I can only seem to get some of them changed. Secondly, I want to remove the embossed border around my menu. (http://rawstockniagara.com/)

    So far I have added the following code:

    .widget-title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    text-transform: uppercase;
    }
    .widget a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    }
    and then this for the menu:
    #access a {
    color: white;
    display: block;
    font-size: 16px;
    line-height: 42px;
    padding: 0 20px 0 20px;
    text-decoration: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    But it doesn’t seem like it is working in either case. Any advice would be greatly appreciated!

    1. Sure, I can try to help. As for the title on your widgets…. let me know which ones are the problem so I can look at your source code specifically. I’ll take a look at your menu as soon as I can! (I’m at work on an IE computer right now, IE doesn’t support the box shadow stuff, so I can’t see the embossing to investigate)

      I see you are in NOTL?? Sweet! I’m from St. Catharines!! Love that region, try to get back and visit as often as I can!

      1. wonderful! The widgets that I am having a hard time changing are the Blog Subscription (jetpack) one and also the plain Text one that we have a simple quote. That error you see with the font-color was something I played with because the original color one didn’t work and I thought I would try! I changed it back to color and also put the box-shadow to 0, which didn’t seem to change anything. I also updated the padding by removing the commas.

        I live in St. Catharines! What a small world! Well, when you come and visit this summer you can come to our festival Aug 25th and tell everybody that you helped fix the website! lol Thanks again for trying to help me figure this out. I really appreciate it!

        1. OK, so the widget stuff will be easy enough to fix! The reason it’s not working for you so far, is that the text in those 2 widgets is not within the actual title…. it’s in the body. So we need to add a coule of selectors to your .widget-title block.

          .widget-title,
          .jetpack_subscription_widget p,
          #text-2 {
                your: existing;
                css: rules;
          }
          

          that should take care of both of them. That #text-2 will only affect that quote though. No other text widgets. And if you were to remove that widget, and add a different text widget, the number would change. Another way to handle text widgets is to add your own classes while typing your quote. for instance:P

          <div class="myClass">
          Type your quote here 
          </div>
          

          So you can put all sorts of classes in the text widgets like that, and then you can target that in your own css

          .myClass {
               css: rules;
          }
          

          That way you can create the css, and reuse that particular class as needed. So hopefully that takes care of the widgets. I’m trying to figure out the menu. The problem is, my laptop won’t connect to my work wifi right now. So I can only use my work desktop, which only has IE, which doesn’t show box shadows.

          I’m going to set up a localhost version of WP on my laptop hopefully today to mess around with the menu bit, but hopefully this gets you started!

        2. Ah, I think I just noticed something! YOu are applying the rules to remove the box-shadow to #access a, which is the actual text links withing the menu.

          However, 2011 applies the original box shadow to just #access, which is the menu itself. Try adding your rules to just #access and let me know what happens!

          EDIT: #box-shadow: none works on #access for me!

    2. Also, I notice above for widget-title, you use color:#000 but on your actual style.css for widget-title you have font-color: #000, there is no such css as font color. It’s just color, just want to make sure that isn’t the problem. All we probably need to do is get a bit more specific with the css if some of your titles aren’t picking up your code… Also, maybe try setting the box-shadow to zero (0) rather than none and see if that does anything….

      I noticed you have padding set up for #content in your child theme too as padding: 0px, 20px, 15px, 0px; – take out those commas, which may be causing unexpected results elsewhere…. just padding: 0px 20px 15px 0px;

  7. Thanks so much for this information! Curious, and I bet this is an easy one for you! I would like to change the menu style from body to H2. I have trolled through the CSS pages and I have tried a few things – perhaps I’m not using correct syntax :)

    1. What theme are you using? Is it 2010 or 2011? If not, a URL to your site would help me look at your css.

      When you say change the menu style from body to H2, do you mean just change the styling so the text looks the same?

  8. Hi! Thanks for the tutorial info! I have a question for you :) I would like to increase the font size in my menu to 18px. Could you share how I could amend my CSS Child theme to reflect this? Thanks! :)

    1. Just the main menu up under the header? That’s an easy one. Just copy over the appropriate block of css from parent to hild and edit! So this block right here:

      #branding #access ul {
      	font-size: 18px;
      	list-style: none;
      	margin: 0 0 0 -0.8125em;
      	padding-left: 0;
      }
      

      Added to you child style.css will do it!

      1. Thanks! Now, 1 final Q for your expertise to dwell on momentarily please :) I don’t think my site is reflecting the font family changes I made based on your tutorial? Could you have a quick look at my CSS to see if I’ve done something backwards? Keep up the good work!

        1. You mean your google fonts? I see your @import line…. i that 3 different fonts? I can’t get to Google right now, is that how we load up 3 different fonts.. with the | (Pipe)? I’ve never done that! Cool

          Anyway, when looking at your body declaration I see that Georgia is the first font you want, is that correct? Are none of those fonts loading for you?

          1. yep, it looks to me as if they are not loading. I’ve tried various browsers, and no go. Any ideas?

        2. Wow, yer totally right! for now, you can put !important at the end of the font stack, like:

          body, input, textarea {
          	color: #373737;
          	font: 17px Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
          	font-weight: 300;
          	line-height: 1.625;
          }
          

          Worked for me here. I’ll have to look into this a bit more to see why the rules didn’t work as expected…

        3. OK, this was totally bugging me, and I played around with all sorts of stuff. Finally figured it out. No need for the !important. I was very confused because I was using the IE built in dev tools which were showing me that my Google fonts were being used… everything was right. But they weren’t displaying on my site at all. I finally changed up the @import like this:

          @import url('http://fonts.googleapis.com/css?family=Arimo|Lusitana:700');
          @import url('../twentyeleven/style.css');
          

          And blammo, everything works as expected, without using !important. Now, I’ve seen many people say the import of the parent theme must come first, but in this case, this fixed everything.

        4. Found one simple error in your stylesheet…

          body is not an ID, it’s an element. IT doesn’t get a hash mark

          #body, input, textarea {
          	font: 15px Georgia, Italiana, Judson, Helvetica, "Antic Didone", "Sans-Serif";
          }
          

          should be

          body, input, textarea {
          	font: 15px Georgia, Italiana, Judson, Helvetica, "Antic Didone", "Sans-Serif";
          }
          
  9. hey your article is great for so many people for so many people but i am not able to change my fonts style i just want to change the font family of the site-title…. i already had a child theme ive edited that only … hers the coding..
    /*
    Theme Name:Twenty Eleven Child
    Version: 2.0
    Theme URI: http://quirm.net/themes
    Description: A basic starter child theme for Twenty Eleven
    Author: Mel Pedley
    Author URI: http://blackwidows.co.uk
    Template: twentyeleven
    License: GNU General Public License v2
    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */
    .page-template-fullwidth-php #content { width: 100%; margin: 0; }
    .page-template-fullwidth-php .entry-content, .page-template-fullwidth-php .entry-header{ width: 90%; }

    @import url(../twentyeleven/style.css);
    @import url(http://fonts.googleapis.com/css?family=Spicy+Rice);

    .site-title{
    font-family: ‘Spicy Rice’, cursive;
    }
    please help

  10. Hi! it seems my twenty eleven style sheet is different to the one mentioned above:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: Helvetica;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    

    Do i need to change the font type from inherit here? I’m not even sure what inherit means in this context as I’m not sure where the font is actually being defined! Any help would much appreciated!
    thanks
    Adam

    1. You are actually just looking in the wrong place. The code you have above is from the reset. You wouldn’t edit that. What that does is cancel out any browser specific built in css, so that themes look the same across browser. You need to scroll down in your stylesheet to find the section starting on line 314, the Global section. Remember, don’t make any edits in that file – you need to make your changes in your child theme!

      1. Rev. Voodoo – thanks for your feedback on that problem. Appreciate the help as I’m only starting out and learning as I go! I’ve just learnt the basics of child themes as I would never have thought to have done that, cheers

Leave a Reply