Change Fonts Site-wide

If you've finally found a theme that you really like but would like to change the font, perhaps make it a bit bigger, tweak the color or change to your preferred font, you can change fonts site-wide with a child theme.

Don't Break Your Site

You've read or heard that you can change the CSS or other files to make your theme look better but you don't want to break your site.

This is what a broken site can look like:

Oooops! That's the sort of thing that can happen if you start modifying the theme's original code or if you modify an active child theme. Even if you managed to modify the theme without breaking your site the next time the theme is updated your modifications will most likely be overwritten. And you'll have to do all that work over again. Total waste of time and energy.

And ignoring updates is not a good idea. Some updates provide extra functionality or they may be security updates. So when you see that an update is available you'll want to update your theme as soon as possible.

Are you feeling brave enough to tackle CODE? Let's do it the safe way with a child theme.

What is a child theme?

A child theme starts off being an exact replica of the parent theme. It inherits everything from its parent theme and then allows modifications. When the parent theme is updated the child theme then inherits everything that has changed in the parent but still keeps its own identity - all the changes that you made before the update. The child theme does not get overwritten.

Let's Get Started

Start by choosing a theme that closely matches the way you want your site to look so you have less modifications to do. I'm using Twenty Sixteen because it's one of the standard WordPress themes. But you can start with your own favorite. Choose a new theme

I'd like to change a few things here. Let's face it the color scheme is boring. And the customizer options are pretty restricted. Larger type would be nice and a sans serif font looks cleaner on the screen than a serif font.

Safety First

But before we start, back up!

Back up every which way:
Back up with Tools==> Export 30 Second Daily Backups
Back up with your plugin Full Backup with a Plugin
Back up with FTP Using Filezilla to Backup Your Website

Feeling a bit more secure? Great!

If this is your first time messing with code or you're still a bit apprehensive then use a test website. A SiteRubix subdomain will probably not be good enough for this so create a subdomain on your dot com if you don't have a spare domain name hanging around. Subdomain on your own dot com website

You used Tools > Export to back up now use Tools > Import (WordPress) to put some content into your subdomain. You want to be able to see the changes you're about to make.

All set? Let's do it!

Make sure your preferred theme is activated.

Now let's make a child theme. Yeah, there's a plugin for that. Child Theme Configurator.

1. Install
2. Activate
3. Run

Name your child theme "original theme name child" e.g. Twenty Sixteen Child.

Do not activate the child theme. Repeat DO NOT ACTIVATE THE CHILD THEME.

We're going to make our modifications and check to see if they each work properly before we go "live". If the child theme is active and the code is wrong then you could be faced with a broken site. Like I did the first time I messed with the code.

To add a new font go to Google fonts https://www.google.com/fonts

The code I used is:

body, button, input, select, textarea {    font-size: 16px;    font-size: 1.1em;    font-family: Ubuntu, Verdana, sans-serif;}.entry-header .entry-title a, .entry-header .entry-title {    color: red;}

When (not if) you get stuck, do what I did and go to support at https://wordpress.org/. This is a thread I started when I got stuck:

https://wordpress.org/support/topic/change-h1-color-in-twenty-sixteen

There's a whole lot more you can do with a child theme but please remember: DO NOT MAKE CHANGES TO AN ACTIVE THEME OR CHILD THEME. Always test your changes using Live Preview.

Have fun,

More Training by Marion Black - Sorted

Please share the love, click 'Like This' (if you do). Ask a question, share something or leave a comment.