This will show you how to add Google fonts to WordPress (self-hosted) with an easy-to-use plugin and some basic CSS skills.
Self-hosted WordPress users can add some serious spice to their font choices by accessing the plethora of awesomeness in Google Fonts.
WordPress.com users will need to purchase the custom fonts upgrade to get typekit fonts. No Google fonts for you sorry.
How to add Google Fonts to WordPress
NOTE: Every font you add will slow down your site a little so make each one count.
1. Install the Google Typography plugin.
Navigate to Plugins >> Add New and enter the term ‘Google Typography’ into the search field.
After activation go to Appearance >> Typography.
2. Choose a Google font.
Click the Add New link.
Choose a font from the drop-down list then select a variant, size and color. You can enter specific text in the top field to see exactly what it will look like on your site.
Open a new tab in your browser and decide which font style you would like to apply this to.
A key tool you will need for this step is called Firebug. It’s an addon for Firefox and Google Chrome.
After Firebug has been installed, right-click on the page element you want to apply the font to and select Inspect Element with Firebug.
A window is going to pop-up. On the left is the HTML, and on the right the CSS selectors that apply to area that’s highlighted.
Make sure the element you want to edit is highlighted then copy and paste the CSS selector that appears at the top of the right-hand window.
In the example above, the CSS selector we would use is:
Paste the selector into the CSS field and click Save.
4. Preview your changes.
Common CSS selectors
Below you will find some of the most used CSS selectors that (should) work for most themes.
Main body font:
Using these selectors will have a more general effect. To change more specific elements, like only page titles you will need to use the Firebug method shown above.
Google Typography Plugin Tutorial
Video created by the plugin author Eric Alli.
Some Google Fonts Resources
- Top 5 Google Font Combinations
- What are the Top 10 Most Popular Serif Google Fonts?
- 10 Best Google Font Combinations You Haven’t Tried Yet
- 10 Great Google Font Combinations You Can Copy
If you had any issues with this guide please let us know in the comments. Or you might just want to show off your new Google fonts for some feedback! 🙂