As a WordPress website owner you’ve probably come across a number of themes that you were hesitant to use because of their built-in font options.
Google Fonts offers a large collection of open source web fonts that are designed to make the web more beautiful, fast, and open through great typography. And if you’re looking for a simple way to give your content some personality while maintaining readability then integrating Google Fonts into your website is a great way to do just that.
With this in mind, in this post, we’ll show you how you can start using Google Fonts in WordPress by using a plugin solution and by manually adding code. But before we begin, let’s take a look at what Google Fonts are and why you may want to use them on your website.
What Are Google Fonts?
Introduced back in 2010, Google Fonts are free, designer fonts that are optimized for the web. As of this writing, the directory contains 832 font families categorized into five different sections – serif, sans serif, display, handwriting, and monospace.
Aside from the sheer amount of typography options at your disposal, here are a few more reasons why you might want to consider using Google Fonts on your WordPress website:
- Available free for use. All of the font families in the directory are available for use under a free license which means that anyone can use them for any project – regardless of whether it’s personal or commercial.
- No self-hosting required. Google Fonts takes care of hosting which means that you won’t have to host the font on your website’s server in order to begin using it. Instead, the user’s web browser will get the font directly from the Google Fonts directory.
Once you’ve picked out a font that goes well with your site’s brand, all that’s left to do is add it to your WordPress website.
How to Use Google Fonts on Your WordPress Website
Although there are a number of different ways you can start using Google Fonts on your WordPress website, we recommend going with a performance optimized solution that will ensure your site doesn’t slow down or become inaccessible.
In this section, we’ll walk you through two different methods of adding Google Fonts to your WordPress website – using a plugin and by adding code snippets manually – while keeping performance optimization in mind.
Method 1: Using a Plugin
Without doubt, the simplest way to add Google Fonts to your WordPress website is by using a plugin. Though there are a number of different plugins in the WordPress Plugin Directory that you can use, we’ve picked out two of the best plugin solutions and recommend that you go with one of them.
Easy Google Fonts
The Easy Google Fonts plugin offers a simple way to add Google Fonts to your WordPress website’s theme without having to code. Once you’ve installed and activated the plugin, you’ll be able to customize your content’s typography settings directly from the WordPress Customizer and preview changes in real-time.
And if you’d like to take things to the next level, you can head over to the plugin’s settings page from the WordPress back-end to control CSS selectors and create theme-specific font configurations.
Key Features:
- Integrates into the WordPress Customizer.
- Allows you to create theme-specific font controls and rules.
- Automatically enqueues stylesheets for the Google Fonts you select.
WP Google Fonts
WP Google Fonts automatically adds all the necessary code snippets from the Google Fonts directory directly into your WordPress website’s HTML and CSS. In addition to this, it gives you finer control over your website’s typography by allowing you to assign Google Fonts to specific CSS selectors.
And if you’re the least bit technically inclined, you can leverage the WP Google Fonts plugin to its full potential by targeting your selected Google Fonts from within your existing theme’s stylesheets.
Key Features:
- Intuitive and easy to use interface.
- Automatically adds the Google Fonts code snippets to your website.
- Allows website owners to assign Google Fonts to specific CSS selectors.
Method 2: Manually Adding Code
If you don’t mind messing around with code then you can always take the DIY approach instead. The key benefit here is that you won’t have to install another plugin to your website.
To get started, head over to the Google Fonts website and browse the directory for a font that you’d like to add to your WordPress website. For the purpose of this tutorial, I’ll demonstrate by adding the Lato font to a WordPress website.
Once you’ve decided on a font, click on the Select This Font button in the top-right corner of the screen. This should add the font to the Family Selected drawer at the bottom of your screen.
Next, launch the Family Selected drawer and navigate to the Customize tab to pick out the styles that you’d like to include in the font. I’ve decided to include Thin 100 and Regular 400 in my selection.
Once that’s done, navigate back to the Embed tab in the Family Selected drawer and copy the URL that points to your font selection. Following our example, the URL is https://fonts.googleapis.com/css?family=Lato:100,400.
Now, we’ll use the wp_enqueue_style() function to add our selected font to our WordPress website. Add the following lines of code to your existing theme’s functions.php file and replace the URL with your own:
function adding_google_fonts() {
wp_enqueue_style( ' adding_google_fonts ', ' https://fonts.googleapis.com/css?family=Lato:100,400', false );
}
add_action( 'wp_enqueue_scripts', 'adding_google_fonts' );
Save and close the functions.php file to continue. At this point, the Google Font you selected should be integrated to your WordPress website. In order to begin using the newly added font on your website, simply add the following font family declaration (or a similar one) to your theme’s main stylesheet:
body {
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 12px;
}
That’s all there is to it! The font you integrated in your WordPress website should now be applied to the CSS selector(s) you specified in your theme’s stylesheet.
Conclusion
Using Google Fonts on your WordPress website is a great way to increase its visual appeal and improve your content’s readability. We encourage you to try out different fonts on your website and apply them to headings, sub-headings, and paragraphs as you see fit.
Let’s quickly recap the main ways you can begin using Google Fonts on your WordPress website:
- Use a plugin like Easy Google Fonts or WP Google Fonts to get started with Google Fonts in WordPress without having to mess around with code.
- Use the wp_enqueue_style() function to integrate your selected Google Font into your existing theme and then apply it to different CSS selectors through your theme’s stylesheet.
Do you have any questions about using Google Fonts on your WordPress website? Let us know by commenting below!
