How to Change the Font Style, Size & Colour in Child Themes for Genesis Theme Framework

I had an email this afternoon from a lady who just purchased the Genesis Theme Framework and News Child theme a few days ago. She wanted to eagerly know how she could change the font style, size and colour on the child theme, so I thought I’d put together a short tutorial to share with everyone else also how easy it is to do this.

To change the font style, size and colour is very simple to do across all the premium themes for Genesis, that’s the beauty about using it for its ease of use and customization. There are some elements however that are beyond my knowledge but I’m learning how to do them slowly.

Ok let’s begin…

Step One

Once you’re logged into your WordPress dashboard head straight over to Appearance > Editor. Just a couple of obvious tips: When you’re on the editor page just make sure that the right theme is selected, I know it will obviously be since you’re using the theme in question, but it doesn’t hurt just to make sure. Also make sure the stylesheet is also highlighted.

Editor

Access your Editor file…

Editor2

Step Two

Now scroll down the page, you may not have to depending on which theme you’re using for Genesis, you’ll see the line tag starting with body { followed by background, colour etc…

The image below in this step is self explanatory, but I’ll explain in any case…

Editor4

The background: #FFF… determines the colour of the background outside the wrap in the News Child theme for example. You can change the colour of this background to anything you want here. For example if I changed the #FFFFF (white) to #666666 (grey) you can see by the two examples below how easy it is to change the background colour in your theme.

Background1

Background2

Ok now the text… if you look back at the last diagram the Colour: #000… determines the colour of the font you want to use. You can change this to any colour you want just by changing the red parts shown, very easy.

The Font-Size: 16px… determines the size of the font; again you can change that to 10, 12, 14 or what ever you want, whether you want to increase or decrease font size… simple.

The Font-Family: Georgia… determines the style of font you are using i.e. Arial or Georgia… Again you can change that to what ever you want.

One other item that I’ve not highlighted in the diagram is that you can also adjust the line height. If you look at the diagram it’s set to 20px. So for example if I changed that to 30px and hit update file, that increases the line gap between the text in the content of your posts and pages, and vice versa to decrease it.

Step Three

Once you’ve made your desired changes simply hit the update file button to see the changes, adjust accordingly until you find the perfect balance.

If you have any questions please don’t hesitate to ask, enjoy.

Recommended Reading: Generate Child Theme Customization Tips

About Fabrizio Van Marciano

Hey everyone, I’m Fabrizio Van Marciano and I’m just a regular bloke, doing his thing in the expanding universe we call the blogosphere. I’m the founder and editor here at magnet4marketing.net. I'm also the author of 170 Blog Traffic Tips; a FREE guide I created to help you get tons of traffic to your blog.
| Google+ | Twitter | Facebook | LinkedIn | Blog

Subscribe to updates + Free eBook


Comments

  1. These points are really effective and thanks for sharing, i always change the looks of the website to make that attractive and new and this information will help me a lot.
    Bruker recently posted..Ore AssayMy Profile

  2. Thank you for this effective tutorial. I might use this in the near future..

  3. Don’t forget to install firebug if firefox or use the inspect function in chrome to discover other CSS that you want changed.
    Adwords Sydney recently posted..AdWords Squidoo Lens from the Click Click Media AdWords TeamMy Profile

  4. Genesis are awesome in Every field Customizations or seo or Perfomance. BTW thanks for nice tutorial Bro.
    Ryan recently posted..How to Make Money Online on InternetMy Profile

  5. Thanks for the tutorial. Where can I find a chart or list of the font colour codes?

  6. Thanks…this was very helpful!

  7. Hi, thanks for nice tip. I tried following and changed the font from Arial, Tahoma, Verdana to Georgia, Times New Roman, Trebuchet MS but it did not change anything. I am using enterprise child theme and yes I did update after changing it. Any idea, where it has gone wrong?

  8. Hi Fabrizio,
    I have a question for you :
    1. How to change font size title in the ‘Home Top Featured Post’ like ‘Johnny Depp as Captain Jack Sparrow’ (the demo).
    2. How to adding a live date like in the right side of categories menu?
    Thanks :)

  9. Thanks for this easiest tutorial to change the style of Genesis child theme.

  10. Hi,
    A very nice tutorial put up there, Please what about changing the font type and size of post / page title. Not really the post text fonts that I want to change but the title.

    Thanks, I shall be waiting for your reply.

  11. Ok, I followed your tutorials here and edited my style css but no changes was affected on my site content.
    Azubuike recently posted..Promoting Affiliate Programs Effectively Using Ninja AffiliateMy Profile

  12. HI Fab,

    I tried to change the font but all my text in bold changed to normal after that, please help.

    Thank you
    Chris Lynn recently posted..WordPress Maintenance Mode Plugin’s to use When Doing MaintenanceMy Profile

Speak Your Mind

*

CommentLuv badge