Video by MarionBlack
Added Dec 12, 2018

Author MarionBlack
2014
2
86
Premium
Ambassador
Rank 86
Unfollow

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.


Join the Discussion
Write something…
Recent messages
kennick2015 Premium
Thanks for sharing this tutorial Marion.
Reply
MarionBlack Premium
You're welcome.
Reply
geraldkew Premium
Great info, thanks Marion, cheers!
Reply
MarionBlack Premium
It's a pleasure Gerald.
Reply
iainclarke Premium
Many thanks for this training Marion. I had no idea it was so complicated to change a font.
Reply
MarionBlack Premium
If you only need to change the font once in a while then this works too
Reply
iainclarke Premium
Just had a look at your video.....tinymce looks great....thanks. I'm always terrified of breaking my site when changing themes etc.
Reply
MarionBlack Premium
Keep backing up Iain :) The person who never makes a mistake never makes anything. Every time I say "ooops" it means I've learned something.
Reply
TommyV Premium
Excellent training.
Haven't built a site yet although I will book mark this training. It is easy to understand. The speed of delivery was spot on. The length was just right. The sound and your voice is clear and pleasing to the ear.
Thank You Marion.
Reply
MarionBlack Premium
Thanks for taking the time to watch the video and give me feedback. I really appreciate it.
Reply
AriefWibowo Premium
I made a child theme and changed the font size with help from my theme developer. Even it is a free theme, the devs were kind enough to help with simple tweaking.
Reply
MarionBlack Premium
That's great. I had a lot of help with child themes from theme developers and http://wordpress.org (I needed it.)
Reply
Top