One to the best thing about working with Responsive is that it comes with loads of options, yet is very simple to enhance. The fact that Emil has chosen to keep to arial as the base fonts makes the CSS super easy to enhance.
When modifying your Responsive theme, you will of course start by making a child theme! Emil, being the support guru that he is, provided a link in his style.css with details on how to get started and a child theme example!
If you’re interested in creating your child theme, go ahead download the child theme example and open it up with your favourite text editor.
In the style.css of the child theme, you’ll see some comments at the top which you can edit if you wish, but I wouldn’t bother (the information in there is very useful). On line 37, you’ll find another comment stating “Start from here”. This is where you can start adding your own style.
One of the easiest way to enhance your site is by changing fonts. And now that Google offers a large series of web fonts to choose from, we can achieve lots of different looks. Let’s say that we wanted to change our headings.
In the Responsive theme (the parent), you’ll find this following css on line 1113:
|
1 2 3 4 5 |
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: 700; line-height: 1.0em; word-wrap: break-word; } |
Thus in your child theme, all we need to do is add a new font-family. Let’s head over to Google’s list of fonts and let’s choose one. Say we fancy Libre Baskerville, to use this font, you first need to add the font to your collection and click the Word Use in the bottom right hand corner.
Once selected, you’ll see that the blue screen at the bottom doesn’t move, and now you can scroll through the steps in the white part of the page. The first steps requires us to select the weight of our font. Let’s select the Bold and normal options.
The second is the character set. I usually leave my settings to default.
Third, is the method we will use to embed our fonts. Since we are making a child theme and we only want to make slight changes to our heading, we’ll click the @import tab and then copy the info and paste it in our child theme like so:
|
1 |
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700); |
Now back to our Google page, you’ll see that in step 4, the css needed is given to us. We’ll apply this to our style.css like so:
|
1 2 3 |
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family: 'Libre Baskerville', serif; } |
And that’s it. You’re done. The most difficult part of this will probably be choosing the font. There are so many to choose from. Here’s a beautiful example showcasing some of the best Google fonts. Hopefully this will inspire you.
Christine Rondeau runs her own WordPress studio, Bluelime Media, in Vancouver, BC. Her work mostly consists of taking Photoshop files from designers and converting them to custom WordPress sites. She's also teaches design students how to use WordPress as a content management system.
Christine, do you find Google fonts can sometimes slow the page load a bit?
Good question and a valid point. I do think that they slow down the site a bit. I try to keep my sites clutter free and try not to install too many plugins, so I haven’t seen much difference. There is at time a wee bit of a flicker, but once the fonts are there, the site is so nice, that it’s something I’m willing to put up with.
Hi Christine – this seems relatively simple, but where do I paste the @import and “font-family: ‘Libre Baskerville’, serif;” within the child theme? I presume the @import goes in line 37, but it’s difficult for a novice like myself to decipher where to put the “font-family: ‘Libre Baskerville’, serif;” – as there is no line 1113 in the child theme.
Am I correct in that after successfully placing these lines, the files should be re-zipped together and uploaded like a new child theme? If this is the case, how do I override the existing destination folder?
Thank you for your assistance!
Hi Jenni,
The @import can be place right at the top of your child theme css below the comments.
Then the font family can be applied to any style you want in your child theme css. Every stylesheet is going to be different depending on what you want to do with your site, so the numbering may not be right. I used the child theme made by Emil, but if yours is different, then yes the number system will be different.
What I usually do is work on my child theme and override my css using FTP. Otherwise, you can use the editor under Appearances and edit directly in there, but it’s best to use FTP.
RE: chefs.thewordpressdesigner.com
I’m really enjoying working with the Canonical Child Theme. Though it’s well commented it’s missing the appropriate place to add custom coding, so I’m adding mine at the bottom to override any previous rules. Question: Isn’t it supposedly bad practice to place @import into style sheets? Just wondering. Thanks!
No sir, not a bad practice, that’s pretty much how the Child Themes work.
Without an @import there will be no styles from the parent.
Emil
Hi Christine!
Thank you for your “manual”. I did change fonts in headings. But what about paragraph text? How can i change that fonts?
Thanks! Wojciech
Hi Wojciech,
If you look in the responsive theme’s stylesheet you’ll find that the font-family for the body is set to Arial, Helvetica, sans-serif.
Just add a new body style to your Child theme’s CSS, so body {Georgia, serif;} for example.
Hi Christine,
Thank you for this helpful info. I am a TOTAL novice at all of this and my head is swimming. So please, if you answer me, explain like you are talking to Forrest Gump.
Is there a simple way to change the font color here, too?
Here is what I have so far… If there is a way to change color, please tell me exactly where to put it. Thank you so much!!
/* =Import Styles
————————————————————– */
@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
@import url(‘../responsive/style.css’);
/* =Start From Here
————————————————————– */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: ‘Julius Sans One’, sans-serif;
}
Hi June,
Of course you can change the colour as well. Just use the color attribute.
/* =Start From Here
————————————————————– */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: ‘Julius Sans One’, sans-serif;
color: red;
}
You can use colour names or hex values. Just look up learn css on Google and you’ll find lots of info.
Yay! Thank you so much! I have looked at CSS tutorials many times, but they always make my eyes spin in my head.
I am not sure why it is so hard for me to understand. But I DO learn by doing so each time someone helps me like you have here, I get it a little more. So thank you, again.
Yahoo! It worked! I have purple!
You have made me very happy. 
Christine,
Is there an easy way to have those rules work on the widget areas, too?
Hi Christine,
I want to change my website font. I want change that in Open Sans. I tried what you said above but I was unable to change. Please help me to change font.
Thanks
Karan
Hi Karan, I looked at your site and from the HTML source code it looks like you didn’t follow the instructions.
You need to first make a child theme.
Add the import rul and then add the css font-family to the body.
Thank you so much for this step by step guide! It is so helpful especially for a newb like me!