Typography plays a huge role in the design of your website. After all, your website is built on type and images! Get the typography right, and you can make a huge impact in a simple way.
With a library of 650+ free fonts and growing, Google Fonts is a great resource for your website. Pair a couple of their beautifully designed fonts, and there’s no reason you can’t have a site that looks professional and makes a good first impression, for free. That’s why today I’m sharing how to use Google Fonts on your site — plus my favorite pairs for body copy and post titles.
How to install Google Fonts on your WordPress site
- Find the fonts you want to use and click the Add to Collection button.
- When you’ve chosen all of your fonts, click on the Use button at the bottom right corner of the page.
- From there, you can select the weights and styles for each of your fonts. For body copy, I recommend selecting four weights and styles: regular, italic, bold, and bold italic. Otherwise your copy won’t display properly when you bold or italicize text.
- Scroll down and you’ll find the code to add to your website. To use the standard method, paste the code before the closing head tag of your site.
- Finally, you’ll need to edit the CSS for your theme to change the fonts. The easiest way to do this is to install the Jetpack plugin and activate the Custom CSS module. This will add an Edit CSS section under your Appearance menu, allowing you to add CSS to your theme and keep your changes separate so they aren’t overwritten if you update your theme.
Don’t know CSS? No worries, you can still add Google Fonts to your site with the Easy Google Fonts plugin. Once you install the plugin, go to the Customize tab under your Appearance menu. This will show a preview of your site and allow you to see what the fonts look like before publishing them to your site. Click on the Typography tab on the left, and you’ll see options to customize the paragraph and heading fonts for your site. When you expand the Edit Font menu, you’ll also see an Appearance tab that will allow you to choose the color and size of your fonts.
Heads up! If the fonts aren’t updating, you may need to add a font control in the plugin settings. Go to Settings > Google Fonts and add a new control (enter whatever name is easiest for you to remember). Then it will ask you for the CSS selector of the element you’d like to control. To find this, open your site in Google Chrome, right-click on the post title (or whatever element you’d like to change), and click Inspect Element. This will open up the code for your site and highlight the element. Look for the name next to class or id and enter that as your CSS selector. A class must be preceded with a period, and id with a hashtag, i.e. .post-title or #post-title. Then when you go back to customize the appearance, you’ll see a new option for Theme Settings with the control you just created.
My top ten Google Fonts for body copy, and what to pair them with for titles
With so many options to choose from, installing Google Fonts on your site is only half the battle. Here are my favorites for body copy, and a few options to pair them with for post titles.
Lato is my go-to Google font. It’s clean, easy to read, and its ten weights make it super versatile for both body copy and headings. It’s modern but with a friendly feel.
Pair it with: Abril Fatface
Similar to Lato, Open Sans is clean, easy to read, and offers numerous weights. Open Sans is slightly wider and open than Lato, making it a little easier to read.
Pair it with: Playfair Display
Merriweather is my favorite serif font for web because the serifs aren’t too pronounced, making it easier to read on screens.
Pair it with: Montserrat
I like Lora for its casual, friendly feel. If you like Georgia, a default font on most systems, you’ll love Lora. It also has a beautiful italic style that can work well in a variety of uses, from blockquotes to menus.
Pair it with: Raleway
Maybe it’s my terrible eyesight, but fonts on websites seem to be getting smaller and much harder to read. Karla is one font that actually reads really well at smaller sizes.
Pair it with: Sanchez
Similar to Merriweather, the serifs of Roboto Slab aren’t too pronounced, making it easy to read.
Pair it with: Oswald
Source Sans Pro
Source Sans Pro is similar to Lato and Open Sans, but a bit more condensed. Its twelve weights and styles make it super versatile.
Pair it with: Gilda Display
Droid Serif is another easy-to-read serif similar to Roboto Slab and Merriweather. It has fewer weights, making it a little less versatile than the other two, but it’s still perfect for body copy.
Pair it with: Nunito
Libre Baskerville is a great classic, serif font. When I use it for body copy, I tend to use it for post titles too, either in a larger size or in uppercase.
Pair it with: Libre Baskerville
The sans-serif sister to Roboto Slab, Roboto is another easy-to-read sans-serif font.
Pair it with: Domine
As you’ll see, a number of my picks are very similar in style — so how do you choose between them? When I’m choosing fonts for a project, I don’t have some specific formula in mind — for example, a brand that’s modern and feminine should use Lato. It’s more of a feeling — I’ll put two fonts together and see if they evoke the right feeling for me. It’s really about trying things out and seeing what works best. The most important thing is to create some contrast between your post titles and body copy so you can establish some visual hierarchy for your reader, directing their eye to what’s most important. You can do this by mixing different styles, but don’t forget you can also create contrast by making your titles uppercase (text-transform: uppercase;) or increasing the letter-spacing (letter-spacing: .1em;).
Bonus points! Fonts for accents
I have to admit, I’m not a huge fan of most of the script and handwritten fonts on Google fonts. But a few of them work well in small doses — think post dates or categories. Here are my picks:
P.S. When to buy fonts.