If you have a WordPress website and you are not satisfied with the fonts you use, you can utilize Google Fonts to bring additional font families to your site. In this article, we will explain how you can easily integrate the font family you have chosen on Google Fonts into your site. You can easily achieve this with a small code block or a plugin.
We want to remind you including additional font styles (bold, italic, and font weights) with the fonts might affect the performance of the website. Try to avoid importing unnecessary font styles.
Go to the Google Fonts website and choose the font family you want to use on your website. In this article, we will use the PT Sans font family.
Adding Google Fonts via code
Step 1: Grab the link
First, you need to go to the Google Fonts page of your selected font to get the unique link of it. Then scroll the page to go down the Styles section. Click the “+” button of your preferred font style. You can select multiple font styles as well. Then, in the “Use on the web” section, select the @import radio button. You’ll find the link as we highlighted in the screenshot below. Copy that link:
Step 2: Edit the functions.php file
Adding a font family is very easy with a small code block. Go to wp-content > themes > your-theme in the file system and open the functions.php file. Edit the code with the link you have copied and add it to the functions.php file; then save and exit:
<?php
add_action( 'wp_enqueue_scripts', 'c7_add_google_fonts' );
function c7_add_google_fonts() {
wp_enqueue_style( 'c7-gfonts', 'https://fonts.googleapis.com/css2?family=PT+Sans:[email protected];700&display=swap', false );
}
?>Step 3: Confirm the process
Refresh your website and search for PT+Sans in your page’s source file to confirm if fonts have been added. The image below shows that the PT Sans font has been successfully added.
Step 4: Changing the fonts
You can now use the font. Let’s change the font family of the p tag (default paragraphs) on our website. For this, enter the following code by editing it accordingly to your preferred font in the styles.css file in your theme’s folder.
p {
font-family: 'PT Sans', Helvetica, sans-serif;
}You can easily copy the code from the Google Fonts page, right under the “CSS rules to specifiy families” section which can be seen below:
Step 5: Check the changes
Congratulations! You have successfully changed your font for paragraphs with a font from Google Fonts.
Adding Google Fonts via a plugin
If you are not confident with your coding knowledge, you can easily perform this process with a plugin. It is a plugin called Easy Google Fonts developed by Titanium Themes.
Step 1: Find and install the plugin
Search, install and activate the plugin as in the image below:
Step 2: Activate the plugin
After installing the plugin, click Activate button to activate it.
Step 3: Change fonts in Customize menu
As you install and activate the plugin, you can now easily change your fonts with Google Fonts in Appearance > Customize in the WordPress interface. There, you will find be able to use Google Fonts for your paragraphs, headers, and more. After selecting a font, simply click Publish button at the top of the left-side menu to apply changes.
Congratulations! You have successfully changed your fonts with Google Fonts by using Easy Google Fonts plugin.