How To Add And Enqueue a Google Font To WordPress Theme

One of the easiest ways to customize a WordPress website’s look is to add custom fonts to it. Google Fonts has different fonts that can ease up the customization process. There are two ways to add and enqueue a Google Font to WordPress Websites. One is added with the plugin and the other is enqueue from the functions.php file. In this article, we will discuss both ways.

What are Google Fonts?

Thanks to the Google Fonts library, independent web developers and large web agencies as well, have access to a web repository of over 900 quality fonts ready to use at no cost.

Google Fonts Launched in 2010 and hosted by Google, this is a collection of APIs that lets you access different web fonts freely. Google Fonts is a resource that allows everyone to use different web fonts and stylize their paragraphs at their discretion.

Google Fonts Typography is one of the WordPress plugins that integrate Google Fonts with your WordPress site. In this tutorial, you will learn how to install and configure this plugin.

How to add and enqueue Google Fonts in your WordPress theme

1. Manually by code
2. By Plugin

In this guide, we are going to show you how to install Google Fonts to your WordPress site using a plugin and enqueue them manually by code. Using this article you will learn how to add Google fonts to WordPress themes even if you are newer in web development and designing.

Enqueue Google Fonts to WordPress by code manually

To enqueue a Google Font to your WordPress theme, you are not allowed to add it by <link> tag. The standard way is to add it with WordPress built-in functions and hooks. To do that, add the below code to the functions.php file of your theme.

if (!function_exists('hs_custom_add_google_fonts')) {
    function hs_custom_add_google_fonts()
    {
        wp_enqueue_style('custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato&display=swap', false);
    }
    add_action('wp_enqueue_scripts', 'hs_custom_add_google_fonts');
}

Just change the URL of the font in the WordPress hook and enqueue your favorite font. In this example, we added “Lato” Google Font to our theme.

Add Google Font To WordPress by Plugin

A simple and easy way to add a custom Google Font to any WordPress theme without coding is by using plugins.

1. Google Fonts Typography

Google Fonts Typography plugin is one of the WordPress Google Font plugins that integrate Google Fonts with your WordPress site.

After installation of the plugin, on the Plugins page locate Google Fonts Typography and click Settings.

You will land on the Customize screen for your current theme. Click the Google Fonts vertical tab. You can configure the fonts related to the content of your site here.

2. Easy Google Fonts

Easy Google Fonts allows you to take full control of your theme’s typography in any WordPress theme (no coding required).

Once you activate the plugin to your website, it’ll automatically enqueue the stylesheets for the Google Fonts you choose to use. To get started head over to Appearance > Customize from the WordPress admin panel.

You’ll notice that a new menu item has been added to the WordPress Customizer called Typography.

It allows you to control the typography settings of your paragraphs and various headings (H1 to H6).