2 Ways to Add Google Fonts to Your WordPress Site

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

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ketty

It’s very helpful and well explained and I’d preferred to add Google fonts with a plugin. “Easy Google Font” is a great plugin.

ahmed soliman

IT really helped me, many thaaaaaaanks 😀

Brad

Hi Jorge,

I have been enqueuing the Google link, but I also @import it in the CSS file I tap to style the text in the Gutenberg editor. After doing that I tried deleting the enqueue and @import’ing it in my SASS styles.scss file which gets compiled in styles.css. It worked. What’s the difference? Is one considered “best practices?”

Thanks,
Brad

tembel

cheers, you make my day.

Jimmy Fang

Hi Jorge: 

Hope you are well and thanks for your tutorial. I’ve followed both of option 1 and option 2. I installed the google font plug-in as you mentioned but I can only see the change in preview mode and when I hit publish button the original font still stayed the same, therefore I followed option 2 by adding both the php & css code you provided but I still can’t see any change. 

I shall be very grateful if you can help me on this ?? Many thanks 

I am looking forward to hearing from you soon

Kind Regards
Jimmy

sebastian

Thank you for your post. In the second option, how to avoid duplicated upload?

mike

I am unsure what you mean by duplicated upload. You shouldn’t be uploading anything with Google Fonts. Could you explain what exactly is happening on your end?

Semira

Really helpful. Thank You.

8
0
Would love your thoughts, please comment.x
()
x