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.
Access your Editor file…
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…
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.
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
Join over 1,500 subscribers and receive my free eBook 
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 Assay
Thank you for this effective tutorial. I might use this in the near future..
Hey Rob, pleased you enjoyed the tutorial
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 Team
Thanks for your tips added to the post
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 Internet
Hey Ryan thanks for dropping by man, I completely agree, I do hope to be able to invest in a unigue blog design one day
Thanks for the tutorial. Where can I find a chart or list of the font colour codes?
Hi Linda thanks for stopping by, you can find font colour codes here: http://html-color-codes.com/
Thanks…this was very helpful!
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?
my mistake.. just deleted the cache and doing good now. Thanks
Hey Trishik, glad you’ve got it working, I was just about to mention the cache
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
Hi Honji, I’ll take a look and post an update here in the comment section for you, keep checking back shortly.
Thanks for this easiest tutorial to change the style of Genesis child theme.
Hey you’re welcome Chiranjeev, we’re working on some new News Child tips for July
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.
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 Affiliate
I think deleting the history will show you the changes
Chris Lynn recently posted..How to Optimize and repair WordPress Database without using Plugins
Hi Chris, are you using a cache plugin? how have you got on? let me know
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 Maintenance