Two and a half years ago we wrote a blog post on how to change your fonts using Google fonts. I’d say an awful lot has changed in those two and half years and it was time we revisit this post and update it to work with our current theme selection.
First, as with any of our other tutorials, you want to ensure that you have a saved a copy of the current theme files to have on hand just in case something goes a little crazy. You can do this by exporting your current theme via FTP, or saving each file that you may have edited in a text editor (Notepad or TextEdit).
Let’s get started!
Choosing your font
The first thing we need to do is to select that perfect font that you’d like to use on your site. You’ll visit Google Fonts to browse the large selection of styles that they have to offer. You can use all the filtering options they have available on the right side of the screen to narrow down your selection if you’re looking for something specific.
If you want to see what your own wording would look like in a specific font, simply click on the sample words under the specific font and type in your own words. If you’d like to apply those words to every font shown within Google fonts, just click the “Apply to All” button.
If you’d like to see how a particular font can pair nicely with a secondary font, click on the font name and scroll down just a bit and you’ll see this handy feature.
Don’t get too font crazy though… ideally you’ll have one font for titles (post titles, page titles, widget titles) and another font for your body font. When you start using more than just 2-3 fonts things get a little crazy aesthetically so keep it simple.
Once you’ve chosen your desired fonts, you’ll click the little red plus icon and you’ll see it drop into a little Gray preview at the bottom right of the screen. At this point, we can decide which font weights we’d like to include by clicking the dark gray bar at the bottom and then selecting the Customize tab.
For example, if you’re going to use one of the fonts for your body font, you’ll want to include the heavier weight (typically 700) and the italics so that when you bold or italicize your font it will actually show those options on the site. If you’re using this font for your post titles, you’re welcome to simply choose one font weight since that will stay the same throughout the site.
Now that we’ve decided on our font(s) we now need to pull those fonts into our theme.
Implementing your font(s)
Within that same box where we chose our font styles, we will click the embed button where it will provide us with the code we need to add to our site.
We want to copy all that code in that top gray box, and login to your WordPress site. Once there, navigate to Genesis>Theme Settings and scroll all the way down to the bottom of the screen. You’ll see a box titled “Header and Footer Scripts”. You’ll paste this code directly into the Header Scripts box.
This code tells your site to pull in that font directly from google so it will actually load your site.
Now that we’ve added this little piece of code, we are ready to start actually changing our fonts… the fun part!
Changing the Font on your Site
The first thing we want to do is grab the appropriate CSS directly from Google fonts.
Looking back in this box, we want to grab one of these lines of code depending on the first font we are implementing. If you’ve only chosen one font you will only see one line here.
The three most commonly changed fonts on a site are your Body Font (the font used for your actual post content), the Headline fonts (the titles of your posts, the title of your pages, and the titles of your sidebar widgets.) and the Site Title and Description. In this example we will change your body font, but I’ll provide a list of common CSS classes at the bottom of this post if you’re change a different element.
To change your Body font you’ll want to search for the BODY section of your Stylesheet. Navigate to Appearance>Editor and you should, be default, land on the style.css file.
Once there you’ll look for the body section that looks like this:
font-family: ‘Neuton’, serif;
This should be towards the top of this file so you won’t have to scroll too far. Copy this section of code, then navigate to Appearance > Customize > Additional CSS (you’ll probably want to open this in a new tab). Paste this code element in Additional CSS, then paste in the code you copied from Google fonts and replace the current font-family line. You can also adjust the line that says font-weight if the font you chose needs to be a heavier or lighter weight.
font-family: ‘Open Sans’, sans-serif;
Click Publish and you are all set! Now, you can click over to your site, refresh a couple times, and see your new font live and in action.
NOTE: We always recommend copying the code from the style.css editor, pasting it in Appearance > Customize > Additional CSS, and then making the changes in Additional CSS. This preserves your customizations in the event you need to update your theme in the future.
Occasionally however, you may complete the steps above and still not see your font. In this instance, you may need to clear your browser’s cache; or if you have a plugin like WPCache installed, you will need to go to those settings and delete the cache before you can see the new font taking effect.
Knowing which element to change
Now that you know what you are looking for and how to change the font family on your site, you can manipulate any of the fonts on your site to match your font preference. Here is a list of the most common css classes that you would typically like to change.
The quickest way to look for the fonts you want to change is to search for the specific sections of code you want to change. Using the “FIND” keyboard shortcuts (CMND + F on a Mac or CONTROL + F on a PC) you can find the various sections.
Your site title is the actual name of your site that appears at the top of your site, and set within Settings>General, if you don’t have your own logo uploaded. You’ll look for this section in your style.css file:
font-family: ‘Roboto’, sans-serif;
Your site description is also known as your tagline and it typically appears directly below your site title. A few of our themes have the site description turned off by default however. You’ll look for this section in your style.css file:
font-family: ‘Arimo’, sans-serif;
Your headlines titles are your post titles, page titles, and widget titles. You can also use your headline titles within your posts or pages using the different Heading tags available. You’ll look for this section in your style.css file:
font-family: “Work Sans”,sans-serif;
margin: 0 0 30px;
If you change this font but it’s not affecting your post titles the way you want, it’s likely because other code within your theme is overriding, so look for the following different pieces of code and see if there is a line within them that say font-family. If there is, you’ll change the font there.
If you decide that you want to use a different style font, all you have to do is repeat the steps above for adding your selected font-family.
Did you find this article helpful? Share it with others!