2 Ways to Add Google Fonts to Your WordPress Site

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 Typography is one of the WordPress plugins that integrate Google Fonts with your WordPress site. I this tutorial, you will learn how to install and configure this plugin.

You will also learn how to integrate Google Fonts with your WordPress site directly, by adding a couple of lines of code in the functions.php file.

Let’s start!

---

Method #1. Use a WordPress Plugin

This first method doesn’t require you to write any code. We’ll use a plugin called “Google Fonts Typography”.

• Click Plugins > Add new
• Enter the search phrase “Google Fonts” in the search box
• Select the first result and click Install now
• Click Activate

• 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

We will pay attention to the first two options: the “Basic settings” and “Advanced settings”.

• Click Basic settings

You can configure the fonts related to the content of your site here. There are 3 options:

• Base typography – all the text elements inside the tag except heading tags, buttons, and input elements
• Headings typography
• Buttons and inputs typography

• Select a different font from each dropdown and watch how the preview changes
• Play a little bit until you find the suitable font combination

• Click the Back arrow and select the Advanced settings

These configuration options refer to other sections of your site.

Notice: You can override in the Content tab the Base and headings typography (already set in the Basic settings) + you can target each heading level separately.

• Select Navigation and change the font family for this page element

• Keep tweaking until you are satisfied
• Click Publish

---

Method #2. Enqueue Google Fonts in Your Site

This approach doesn’t rely on a plugin. Instead, you’ll add code directly into your theme.

Select the Fonts

• Go to the Google Fonts site on your browser
• Browse or search your desired fonts and click the “+” symbol to add them

• Copy the hyperlink to embed in your site

Add the PHP Function

• Go to the active theme directory of your site
• Open the functions.php file

• Copy and paste this code:

<?php function wpb_add_google_fonts() {    wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display|Space+Mono|Stint+Ultra+Expanded&display=swap', false );    }        add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' ); ?>

Make sure you replace the link with your own.

The CSS Styling

• Open the style.css file of your theme
• Copy and paste this code:

body {    font-family: 'Stint Ultra Expanded', cursive; }  h1, h2, h3 {    font-family: 'Playfair Display', serif; }  button, input {    font-family: 'Space Mono', monospace; }