How to Add Google Web Fonts in WordPress Themes the “Right” way

Do you want to add Google web fonts in your WordPress theme?

Google fonts allow you to easily use beautiful web fonts on your WordPress website. You can use them to improve your website’s typography, user experience, and aesthetics.

This article will show you how to add Google web fonts to WordPress themes properly.

Here is a brief overview of topics we’ll cover in this guide.

Finding the Best Google Fonts for Your WordPress Theme

The first thing you need to do is find the Google fonts that you like. Simply visit the Google Fonts website and browse through the library.

When you find a web safe font that you like, go ahead and click on it to view different styles available.

You can select the styles you would like to use on your website.

Next, click on the ‘View Selected Families’ button, which will open a sidebar.

From here, you will see the usage instructions under the section ‘Use on the web’.

You will see that there are two different tabs for adding the font to your site

The first is the Link method, which is the recommended standard way of adding web fonts.

The second tab uses the @import CSS method that allows you to load the fonts via your CSS stylesheet.

We will show you how to use each of these methods and what are there pros and cons.

Note: For some of these methods, you’ll need to edit your WordPress theme files. You can do that by connecting to your website using an FTP client or the File Manager app under your hosting control panel.

Once connected, you need to visit the /wp-content/themes/Your-Theme-Name/ folder. From there, you’ll find theme files that you may need to edit for this tutorial.

For more details, see our tutorial on how to copy and paste code snippets in WordPress.

Method 1. Adding Google Fonts to Your Theme Using Plugin

For this method, we’ll be using a WordPress plugin to load Google Fonts.

First, you need to install and activate the Fonts Plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Appearance » Customize page to launch theme customizer. From here, you’ll see the new Fonts Plugin tab.

Clicking on it will show you plugin options.

You can choose to use Google Fonts for different areas of your website.

Alternately, you can also just choose to load a font for your WordPress theme.

Simply switch to Advanced Settings » Load Fonts Only tab.

From here you can choose Google Fonts that you want to load for your WordPress theme.

Simply type in the font name and then select it.

Once you are finished, don’t forget to click on the Publish button to save your changes.

Now, if you used plugin’s advanced features to assign fonts for different areas of your website, then those will work automatically.

On the other hand, if you opted to load fonts only, then you will need to add custom CSS rules for them. For instance, here is how you would load a font for the paragraph element throughout your website.

p {
font-family: ‘Open Sans’, sans-serif;
}

Method 2. Adding Google Web Fonts to Your Theme’s Header

This method is the easiest way to add Google Fonts directly to your WordPress theme.

Simply edit the header.php file for your WordPress theme or child theme. After that, copy and paste the Link code before your WordPress theme stylesheet link code.

Here is how it would look like:

Basically the goal is to put the font request as early as possible. This allows user’s browser to download fonts before rendering the page.

Once you have done that, you can use the font in your theme’s CSS file:

h1 {
font-family: ‘Open Sans’, sans- serif;
}

Method 3. Add Google Fonts in Theme’s Stylesheet

Fore this method, we’ll import the font CSS in our WordPress theme’s main CSS file.

Simply edit style.css file in your WordPress theme’s root folder and add the code from the ‘@import’ tab to the top of the CSS file.

@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap’);

This is how it looked in our demo website’s style.css file.

Important: Make sure that you add the @import line at the top of your CSS file.

Method 4. Properly Enqueue Google Fonts in WordPress

The first two methods we mentioned earlier require you to directly add fonts by editing your WordPress theme files.

This works well if you are using a child theme to make all your changes.

On the other hand, if you are making these changes to the main theme, then your changes will be lost the next time you update the theme.

An easier fix for that, is to programmatically add some code that automatically loads Google fonts for your WordPress theme to use.

For this you to add some custom code snippet to a site-specific plugin or by using a custom code plugin. For details, see our tutorial on how to add custom code in WordPress.

Simply add the following code snippet to your WordPress website.

function wpb_add_google_fonts() {

wp_enqueue_style( ‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ );

Note: Don’t forget to replace the URL with the URL for Google fonts you want to add.

That’s all, WordPress will now use the Link method to automatically fetch Google Fonts you added.

You can confirm it by viewing your website’s source code, there you’ll see your Google fonts stylesheet added in the footer section of your website.

Bonus Section: How Web Fonts Affect WordPress Speed

Google fonts load extremely fast because they are served via Google’s massive CDN network with server locations around the globe.

Since these fonts are used by millions of websites, there is a good chance that the users may already have them stored in their browser’s cache.

This reduces their performance impact on your website speed. You can further reduce this impact by using only one or two web fonts in your design.

For more tips, see our complete guide on WordPress performance and speed for beginners.

We hope this guide helped you learn how to easily add Google Web Fonts to your WordPress theme. You may also want to see our guide on making a custom WordPress theme from scratch without coding and our list of the best free website hosting services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.