How to Add Google Fonts to WordPress Themes [Manually + Using Plugin]

Key Takeaways

• Google Fonts can be integrated into WordPress using multiple methods, including safe manual code and simple plugins.
• The extensive, free library of Google Fonts is a powerful tool for improving a website’s aesthetics and readability.
• To ensure optimal site performance, it is crucial to follow best practices for font loading, such as limiting font weights and using modern embed techniques.

The modern web is all about user experience. Businesses invest significant time and money to ensure that their website’s visitors get the best experience while browsing their website. And text font plays an integral part in the website’s aesthetics.

It doesn’t matter how good the quality of your content is—if it is not pleasant to read and is too cluttered for the readers, then all your efforts go to waste.

Although there are a number of typographic options available, the easiest way to get access to hundreds of professional fonts (free of charge) is by using Google Fonts with your WordPress website.

In this post, we’ll look at detailed steps on how to add Google fonts to a WordPress website manually and by using a plugin. We’ll also take a look at the best fonts that you can use to improve the readability of your website’s content.

What Are WordPress Google Fonts and Why Should You Use Them?

Before we begin, let’s quickly take a look at what Google Fonts are, along with the key advantages of using them on your WordPress website.

Google Fonts is a library of libre licensed fonts launched in 2010. You can use the amazing library of Google Fonts by calling the provided API.

The interesting fact is that you can use 1,800+ open-source font families for free. That’s incredible. It features an interactive web directory that allows you to search for specific types of fonts and test them out in your web browser.

Using WordPress Google Fonts has a number of advantages:

• Free and open-source – No licensing fees, even for commercial WordPress projects.

• Fast delivery via Google CDN – Fonts load quickly without putting extra load on your hosting server.

• Easy WordPress integration – Most modern themes and plugins support Google Fonts out of the box.

• Customizable without coding – Change typography site-wide using the WordPress Customizer or plugins.

Now that you know some of the advantages of adding Google Fonts to a WordPress website, let’s take a look at how to add them to your site.

Note: In regions with strict privacy laws like the EU, you may want to self-host fonts to avoid sending visitor IP data to Google’s servers.

Experience Blazing-Fast WordPress Hosting with Cloudways Autonomous

Add Google Fonts without a performance hit. Our platform delivers top-notch speed and seamless scalability, ensuring your site stays optimized and fast.

Experience Today

How to Add Google Fonts to WordPress Manually

Google Fonts takes most of the heavy-lifting out of embedding font families into your website. This is an online library which can be called in any web project like any other JS or CSS script.

In this section, I’ll show you how to manually install Google Fonts on a WordPress website. But first…let’s find the right fonts to use with your WordPress website.

Step 1: Find the Font You Want to Add to Your Website

To get started, browse the Google Fonts directory and choose the font you want to use on your WordPress website. If you already have a specific typeface, you can simply search for it using the search box at the top of the page.

You can also filter fonts by appearance, properties, language, or writing system, and explore categories like serif, sans serif, calligraphy, technology, and seasonal.

Cool thing about Google Fonts is its interactive directory feature that lets you quickly preview fonts in real time. All you have to do is click into the field box of the font and type text in it.

Hope you’re done selecting the font of your choice by now. For this tutorial, I’ll go with Mozilla Text.

Step 2: Customize and Get the Font

After you’re done selecting your desired font, you can customize it (depending on the font you choose) and get it by clicking on the Get font button in the upper right corner.

Keep in mind that the more font styles and languages you select, the longer it will take for your site’s pages to load. So the best practice is still to be selective and only choose the styles and languages you absolutely need.

So this tutorial, I kept my selection lean.

Step 3: Embed the Google Fonts Into Your WordPress Website

There are a number of ways you can add a custom font to WordPress. We’ll show you how to do it using the wp_enqueue_style() function since it’s the recommended approach for WordPress websites.

Certainly. Here are the step-by-step instructions for adding the Google Font, including both the code snippets plugin and child theme methods.

1. Get the Google Fonts URL

First, you need the URL for the font stylesheet. From the code Google provided, copy the link from the href attribute of the last <link> tag.

For the Mozilla Text font I chose, the URL is: https://fonts.googleapis.com/css2?family=Mozilla+Text:[email protected]&display=swap

2. Add the Font to WordPress

You can choose one of the following two safe methods to add the font to your site.

Option A: Use a Code Snippets Plugin (Easiest)

This method is the easiest and safest for beginners.

• Install and activate a code snippet plugin like WPCode or Code Snippets from the WordPress plugin directory.

• Go to the plugin’s menu in your dashboard and create a new snippet.

• Choose the PHP Snippet type.

• Copy and paste the embed code Google gave you for your font in the code snippet provided below. This will correctly enqueue the font and add a performance optimization (preconnect) to speed up loading.

add_action('wp_head', function() {

?>

//add embed code google gave you for your font here

<?php

});

My file code will look like this:

add_action('wp_head', function() {

?>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Mozilla+Text:[email protected]&display=swap" rel="stylesheet">

<?php

});

• Name your snippet, save and activate. Your font will now correctly load on your site.

To confirm, you can inspect your site in Chrome DevTools and search for Mozilla+Text. You’ll see the exact <link> tag loaded in the <head> — confirming the font is available for use on your site.

Option B: Use a Child Theme (Recommended Practice)

This is the best long-term solution because it keeps your changes safe when your main (parent) theme updates. If you add code directly to your parent theme, the next update could wipe it all out. A child theme is like a little sidekick that inherits everything from the main theme but also holds your custom tweaks.

Step 1 – Figure out your parent theme name

• Go to Appearance → Themes in your WordPress dashboard.
• You’ll see your active theme — for example, Twenty Twenty-Five.
• Remember this name — we’ll need it in a minute.

Step 2 – Make your child theme folder

• On your computer, create a new folder.

Name it something like:

twentytwentyfive-child

• Replace twentytwentyfive with your actual parent theme folder name, keep it all lowercase, no spaces.

Step 3 – Create a style.css file

Inside that folder, create a new file called:

style.css

Open it in any text editor (Notepad works fine) and paste this:

/*

Theme Name: Twenty Twenty-Five Child

Template: twentytwentyfive

*/

• Theme Name: This can be anything you want — it’s what you’ll see in your dashboard.
• Template: Must match your parent theme’s folder name exactly (all lowercase, no extra spaces).

Save the file.

Step 4 – Create a functions.php file

In the same folder, create another file called:

functions.php

Open it and paste this:

<?php

add_action('wp_head', function() {

?>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Mozilla+Text:[email protected]&display=swap" rel="stylesheet">

<?php

});

Save the file.

Step 5 – Zip the folder

• Right-click your twentytwentyfive-child folder.
• Choose Compress or Send to → Compressed (zipped) folder.

• You now have twentytwentyfive-child.zip.

Step 6 – Upload it to WordPress

• In your WordPress dashboard, go to Appearance → Themes.
• Click Add Theme → Upload Theme.

• Select your .zip file and click Install Now.

• Once installed, click Activate.

Step 7 – Check if it worked

• Visit your site.
• Right-click anywhere and choose Inspect (or press F12).

• Go to the Elements tab and hit Ctrl+F (or Cmd+F on Mac) to search for: Mozilla+Text.

• If you see it in the <head> section, the font is loading.

• Success!

With this approach, your child theme becomes a safe space for adding font customizations later, without ever touching or risking changes to the parent theme.

How to Add Google Fonts to WordPress Using a Plugin

For some, the manual integration of WordPress Google Fonts might not be an option. Don’t worry. There is another (simpler) way to add Google Fonts to your WordPress website. Through a plugin.

Plugin we’ll use:

Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts by fontsplugin.

Free, works with all modern WordPress themes, and lets you preview changes live before publishing.)

Step – Install the Plugin

• Log into your WordPress Dashboard.
• Go to Plugins → Add Plugin.

• Search for “Fonts Plugin”.

• Click “Install Now”. Wait a few seconds until the button changes.
• Click “Activate”. Once activated, the plugin is ready and will add new font controls to your site.

Step 2 – Open the Font Controls

• In your left-hand menu, go to Appearance → Customize. This opens the WordPress Customizer, where you can edit styles and see a live preview.
• Inside the Customizer, you’ll now see a new menu for the plugin we installed. If you don’t see it right away, try refreshing the page after activation.

Step 3 – Pick Your Google Fonts

• Click Fonts Plugin → Basic Settings. Here you’ll see three options (in the free version):

• • Base Typography
  • Headings Typography
  • Buttons and Inputs Typography

• Click the “Default Font” option for all three options I mentioned earlier. You’ll see a dropdown list from which you can select hundreds of Google Fonts.

• I’ll choose a Google font called “Blinker” from the dropdown menu.

Step 4 – Preview and Publish

• Look at the live preview on the right side of your screen. You’ll see the fonts change instantly.

• If it looks good, click the blue “Publish” button at the top of the Customizer.

• Visit your site to confirm the changes are live. Below you can see the font implemented on my sample page.

Most Popular Google Fonts to Use in 2025

The sky is the limit when it comes to fonts selection with Google Fonts. You, as a webmaster, have the liberty to choose whichever font you deem suitable for your readers.

Let’s look at the best Google Fonts which are widely used and provide the best readability.

1. Lato

Lato is a clean and versatile sans-serif typeface created by Łukasz Dziedzic. With 10 available styles, it works equally well for headings and body text, making it a go-to choice for professional, modern websites.

2. Roboto Condensed

Designed by Christian Robertson, Roboto Condensed is a narrower version of the popular Roboto font. Its compact style saves space while keeping text highly readable, perfect for minimalist designs and mobile-first layouts.

3. Roboto Mono

Also by Christian Robertson, Roboto Mono is a monospaced typeface ideal for displaying code, technical data, or tabular content. Its variable axis support makes it highly adaptable for both aesthetic and functional purposes.

4. Oswald

Originally designed by Vernon Adams and later refined by Kalapi Gajjar and Cyreal, Oswald reinterprets the classic “Alternate Gothic” style. With a bold, impactful look, it’s a great choice for headlines and call-to-action text.

5. Arimo

Created by Steve Matteson, Arimo is a highly legible sans-serif font designed to match the metrics of Arial while offering a fresh, modern look. It’s a solid pick for body text across different screen sizes.

6. Noto Sans

Developed by Google, Noto Sans is part of the Noto font family that aims to support every language and script in the world. Its clean design and multiple axis options make it extremely flexible for multilingual websites.

7. Raleway

Raleway is an elegant sans-serif typeface that works beautifully for large headings and display text. Its thin, graceful lines and modern style make it popular among creative and design-focused sites.

There are many other Google Fonts for WordPress websites available. Be wise when selecting the font family as it can have both positive and negative impact on your site’s readership.

Best Practices of Using Google Fonts in a Website

Integrating WordPress Google Fonts is no rocket science, but there are always two ways to perform any task – good way and the best way.

Let’s check out the best practices involved in using the Google Fonts in WordPress.

Limit Font Weights

Selecting the complete set of font weights is tempting but it has its drawbacks. For every variant, API gets heavier and takes more time to load the complete set of font weights.

This is usually loaded at the start of the web page, and if not optimized, can slow down the initial loading time of your web page.

Host Fonts Locally

Google font is an online library which is hosted elsewhere. Although it has a minimal impact on your site’s performance, however, in the event of unavailability, you would still be able to serve the selected Google fonts if hosted locally.

Accessibility is important

It is not an option anymore to optimize your website for people with vision impairment. Google fonts enable you to style your font the way which is most convenient to this type of visitors.

Use the contrast which is easily readable on most of the screen sizes and types, and is not heavy on the reader’s eye. Using very bright colors or very light colors is not ideal. Choose the color and size best suited for most readers.

Experience Blazing-Fast WordPress Hosting Optimized for Fonts

Google Fonts can cause slow first-page load. Our hosting automatically optimizes and serves fonts from a global CDN or locally, eliminating delays and improving Core Web Vitals.

Try Free for 3 Days

Conclusion

Using Google Fonts in WordPress can help you quickly change the look and feel of your website. Whether you’re trying to go for a professional-looking site or a fun one, chances are Google Fonts has the perfect font for you.

In this blog, we showed you a step-by-step roadmap for adding Google Fonts to your WordPress site. We’ve covered everything from safe, hands-on methods like using a code snippets plugin or a child theme, to quick, no-code options with plugins.

Hopefully, you’re in a good position now to take things further yourself. Still, if you have any questions, let us know in the comments.