If you’re new to Genesis Framework for WordPress, and especially, new to Genesis Sample and similar themes, you probably have no idea how to change it’s default font, or add another one.
Genesis-based themes lets you easily integrate Google fonts by default. Genesis Sample theme already loads one Google font, and you can easily replace it, or add another one without much work. In this tutorial you’ll learn:
- how to change Google Font in Genesis Sample theme
- how to add additional Google font weight to Genesis-based themes
- how to add a second Google font to Genesis Sample theme
Let’s do it in just a few simple steps.
How to change Google Font in Genesis Sample theme
Genesis Sample theme uses Source Sans Pro Google font by default.
If you want to change the font in your website you need to edit config >> appearance.php file, and style.css file. You don’t need any code editors, ftp clients or other software to change the font. Just login to WordPress admin panel, and go to Appearance >> Theme Editor.
Once you’re there click config >> appearance.php on the right side.
Look for ‘fonts-url’ setting in the file (line 30).
Here’s the default code:
'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700&display=swap'If you want to replace Source Sans Pro with any other Google font, just replace the name with the font you want to use. Here’s the example with Montserrat:.
'https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700&display=swap'If Google font name has more than than one word, add symbol “+” between the words like you see in the default font.
After changing font don’t forget to save changes by clicking Update file button at the bottom of the page.
Now you’ve added support for a new Google Font. What’s left is to add this font to some elements on your website. Go again to Appearance >> Theme Editor, or just click on the style.css link on the right.
By default Genesis Sample theme defines font family in two places in the style.css file. Locate both places in the code (you may use CTRL+F to search in the file, and enter source sans to quickly get to the code). Replace the default font family with the new one. For example from:
font-family: "Source Sans Pro", sans-serif;to
font-family: "Montserrat", sans-serif;After changing font family, or after making any other changes to style.css don’t forget to change it’s version at the top of the file. It will make sure that your web browser will load the latest style.css version instead of loading an old one from browser cache.
Change it to any number. For example from 3.4 to 3.4.1, or 3.5, 4.0 – does not matter as long as it’s different than previous.
How to add additional Google font weight to Genesis-based themes
Adding additional font weight for Google fonts in Genesis framework is simple and straightforward. Here’s how to do it:
- Go to Appearance >> Theme Editor.
- Open config >> appearance.php file.
- Locate Google font setting (‘fonts-url’) and add additional weights to the Google Fonts url.
For example, if you want to add weight 500 support here:
'https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700&display=swap'just add “,500” to the URL, like here:
'https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,600,700&display=swap'If you want to add 500 italic, add 500i. Don’t forget to save changes at the bottom of the page.
That’s it – you’re ready to add new font weight to your Genesis-based theme.
How to add a second Google font to Genesis Sample theme
You can add second Google Font support to Genesis almost the same way as you’ve added new font weights. Here’s what you need to do:
- Go to Appearance >> Theme Editor.
- Open config >> appearance.php file.
- Locate Google font setting (‘fonts-url’) and add additional weights to the Google Fonts url.
For example, you want to add additional Google font to this Google URL:
'https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700&display=swap'What you need to do it to add “|” and new font name just after the first font name:
'https://fonts.googleapis.com/css?family=Montserrat|Raleway:400,400i,600,700&display=swap'That’s all you need to do. Now after saving changes you can add the second Google font to your theme’s stylesheets. No need to install any third party plugins or add another scripts.
