How to Change the Font Style, Size & Color in Child Themes for the 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 really wanted to know how she could change the font style, size and color 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 color 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…


Editor Style CSS


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, color etc…

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

Editor Code


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





Ok now the text… if you look back at the last diagram the Color: #000… determines the color of the font you want to use. You can change this to any color 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.

Are you looking to increase web visitors to your site? You can buy website visitors and increase your online customers and sales!
Receive an update straight to your inbox every time I publish a new article. Your email address will never be shared
Google Analytics Alternative