How do I change my theme's fonts?
To change the theme's default fonts (and other stylings), we highly recommend using the Easy Google Fonts plugin, which allows you to easily take advantage of the scores of type options provided by Google Fonts. It also provides many ways to further customize your text beyond just fonts.
To see all of the font options provided, check out Google's Font Directory.
To search for and install this plugin in WordPress:
- Go to WP Dashboard > Plugins > Add New
- Search for the Easy Google Fonts plugin > Install Now > Activate
In this example, we will be changing the Redwood theme's body font from the default 'Lora' (image below) to the 'Playfair Display' font.
Navigate to the Easy Google Fonts settings page by going to WordPress Dashboard > Settings > Google Fonts.
STEP 1. CREATE A CONTROL
We'll first need to create a "Control".
This is essentially just a title that will help you recognize this particular font change later on. It's especially helpful if you end up make multiple changes. You can choose any control title you want!
We'll give our control a name of "Body Text" because we're going to be changing the font-family of our theme's body text. Enter your chosen control title in the field that says "Enter control name here". Click the button titled "Create Font Control" afterward.
STEP 2: ADD YOUR CSS SELECTORS
A white section will appear below your newly-created control requesting you add CSS selectors.
CSS selectors are the CSS code related to the text element you want to change. This will help the plugin target and apply your desired changes specifically to your chosen element and nothing else.
Don't know CSS code? Don't worry!
We've created a big list of each theme's text elements and their related CSS selectors for you.
All you need to do is click through to your theme's article below, find your text element you want to change in the list, and use the related CSS selectors noted.
TEXT ELEMENTS & SELECTORS BY THEME
Hemlock - CSS Selectors
Rosemary - CSS Selectors
Redwood - CSS Selectors
Florence - CSS Selectors
Oleander - CSS Selectors
Sprout & Spoon - CSS Selectors
Laurel - CSS Selectors
Alder - CSS Selectors
Hawthorn - CSS Selectors
For our example, I'm changing Redwood's body text font.
I've gone to the "Redwood - targeting text elements" article above and found the section in the list titled "General Body Text".
The "General Body Text" section has 3 separate CSS selectors I need to use (underlined in red above).
Please don't insert the "[SPACER]" text into the plugin field as it is not a selector, simply a way of separating different bits of code.
Note: Unless there's a "[SPACER]" text separating the multiple bits of code you need, please enter the entire string into the plugin's field as 1 complete selector.
In the Easy Google Fonts plugin field titled "Add CSS Selectors", I will add the 3 selectors underlined in red above. For multiples like this, add each one at a time, hitting your "enter" or "return" keyboard key after each.
When finished, click the button titled "Save Font Control".
STEP 3: APPLY YOUR FONT & STYLINGS
Now that we've created our control and added our CSS selectors for that control, it's time to apply the new font!
Navigate to WP Dashboard > Appearance > Customize > Typography > Theme Typography
The font controls you've created will be listed here.
Click the control name to have its settings drop-down beneath.
I want to change my Redwood theme's body text from "Lora" to instead be "Playfair Display". I click on the "Font Family" drop-down and type/search for the desired font name. Instantly, the new font I've chosen will apply itself to the theme preview on the right.
You can use the other styling drop-down options to adjust font-sizing, font-weight, apply additional scripts/subsets (if your language's characters require it), and more.
Don't forget to check out the other 2 tabs, "Appearance" and "Position", for additional customization options as well!
Save changes by clicking the "Publish" button at the top of the Customizer screen when finished to apply these new stylings to your site.
Want to change even more text elements in the theme? Simply repeat the above steps for each different text element.
Let us know if you have any questions about this by opening up a new support ticket!