How To Use Downloaded Google Fonts in WordPress

How To Use Downloaded Google Fonts in WordPress
How To Use Downloaded Google Fonts in WordPress

Nowadays, Google Fonts are very popular to be used in websites. In a related article on GoodSelects, we talked about Google Fonts integration, either it is remotely or locally. Most content management systems (CMS) have already integrated Google Fonts to be used remotely.  In this article, we will explain how to use downloaded google fonts in WordPress, as it is the most famous CMS.

WordPress Theme Fonts Integration

WordPress themes integrate fonts by calling wp_enqueue_style inside functions.php file. Each theme has functions.php file which adds features and functionality to the WordPress theme. Below, we will use the Underscore starter theme as a tutorial example.

Underscore Theme

Underscore theme is a popular startup theme used to build your custom theme. It comes with comments useful to start building themes. You have to go here and download the theme zip file with the desired name and import it to your WordPress site. You have to be familiar with web development in order to complete this tutorial.

Open your WordPress site with code editor named Netbeans IDE. You can download it from here. After going to download page, you have to choose Netbeans PHP version.

Once Netbeans installation is finished, open Netbeans IDE, and select File –> New Project. Then select PHP Application With Existing Sources, and set source code directory.

Every WordPress theme folder is put under wp-content/themes directory, so you have to navigate to the theme folder and open functions.php file.

Use Downloaded Google Fonts

Once you have downloaded Google Fonts as we have explained recently in here, you have to add the fonts folder; which includes fonts files and fonts style file; directly under theme folder.

Open functions.php file, and look for the section commented with:

 * Enqueue scripts and styles.

You will find the theme scripts function. Comment the following code line


And add the following code line

wp_enqueue_style('local-google-fonts', get_template_directory_uri().'/fonts/fonts.css');

Save changes and navigate to your WordPress site to see what has been done. In this way, you can use the fonts downloaded from Google Fonts locally in your WordPress theme.


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.