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

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

Comments

Post a Comment

Popular posts from this blog

Vulnerable WordPress Plugin: WP File Manager v6.8

Every programmatical system; no matter what it is; has vulnerabilities. The only solution to keep your apps or websites safe, is to keep them updated and have a security firewall plugin. Recently, A Persistent Cross-Site Scripting Vulnerability has been discovered in WordPress Plugin WP File Manager v6.8 If you have version 6.8 of this plugin, you have to update it version 6.9 in order to keep your website safe. Don’t be late, update to keep your website info safe.
Read more

Update Your iPhone Now!

Apple on Thursday delivered different security updates to fix three zero-day weaknesses that were uncovered as being effectively misused in nature. Turned out as a feature of its iOS, iPadOS, macOS, and watchOS updates, the flaws reside in the FontParser component and the kernel, allowing adversaries to remotely execute arbitrary code and run malicious programs with kernel-level privileges. The zero-days were discovered and reported to Apple by Google’s Project Zero security team. “Apple is aware of reports that an exploit for this issue exists in the wild,” the iPhone producer said of the three zero-days without giving any extra subtleties in order to permit a dominant part of clients to introduce the updates. The rundown of affected gadgets incorporates iPhone 5s and later, iPod contact sixth and seventh era, iPad Air, iPad little 2 and later, and Apple Watch Series 1 and later. The fixes are accessible in variants iOS 12.4.9 and 14.2, iPadOS 14.2, watchOS 5.3.9, 6.2...
Read more

Nice Scrollbars Using React JS With Several Options

Image
Features frictionless native browser scrolling native scrollbars for mobile devices fully customizable auto hide auto height universal (runs on client & server) requestAnimationFrame for 60fps no extra stylesheets well tested, 100% code coverage React JS Scrollbars Usage Details You can view documentation and examples through the following link .
Read more