In this tutorial, I will show you how to change fonts on the Modern Blogger Pro theme, a WordPress theme on the Genesis Framework, created by Lindsey of Pretty Darn Cute Design.
The Modern Blogger Pro theme uses Google Fonts, which are free fonts, giving you the flexibility to customize your site by merely changing the fonts used by the theme.
To get started, navigate to your stylesheet. If you have access via your WordPress dashboard, go to Appearance > Editor > Stylesheet. If you don’t have access to your theme’s files in your dashboard, you’ll need to update via FTP or cPanel. Look for this section:
/* Import Fonts
——————————————— */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400|Lobster+Two|Montserrat);
To find a new Google Font, go to https://fonts.google.com/ and search for a font. You can filter for fonts to make your choice easier. In this tutorial, I’m going to use the Amatic SC font, since I’ve recently received a support request from a user wanting to replace the Lobster Two font used by the Modern Blogger Pro theme with the Amatic SC font.
- Search for your desired font
- Click the + sign next to the font
- Click the – sign in the drop-down
- Make note of how title of the font
- Make note of how to update your CSS
(click on screenshot to make larger)
Once you have selected the font, and made note of the details of the font, it’s time to go back to our stylesheet.
In this example, we want to remove all instances of the Lobster Two font, so we’ll replace Lobster+Two with Amatic+SC (as seen in #4 above) in the “import fonts” field:
/* Import Fonts
——————————————— */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400|Amatic+SC|Montserrat);
After replacing Lobster+Two in this section, it’s time to replace it site-wide in the theme. Clicking Command-F (on a Mac) will bring up a search bar. Type in Lobster Two, and then replace all instances of font-family: ‘Lobster Two’, sans-serif; with font-family: ‘Amatic SC’, cursive; (as seen in #5 above).
Save your stylesheet to update. Your site will then display the Amatic SC font instead of Lobster Two:
If you want to have me make this update for you, I’d be happy to help. Send me a note!
Leave a Reply