| WordPress

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

Click Activate

  • On the Plugins page locate Google Fonts Typography and click Settings

click Settings

You will land on the Customize screen for your current theme.

  • Click the Google Fonts vertical tab

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

Three options to configure the fonts

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

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.

You can override in the Content tab the Base and headings typography

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

Select Navigation and change the font family

  • 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

Browse or search your desired fonts and click the + symbol

  • Copy the hyperlink to embed in your site

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

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;
}

Copy and paste this code


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.