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
//wp_enqueue_style('wplab-google-fonts','https://fonts.googleapis.com/css?family=Bubbler+One');
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.
