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; }
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.
IT really helped me, many thaaaaaaanks 😀
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
cheers, you make my day.
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
Thank you for your post. In the second option, how to avoid duplicated upload?
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?
Really helpful. Thank You.