Written by Admin on 2025-05-06

Downloading Google Fonts Locally in WordPress

Google Fonts are a popular choice for website designers and developers. These fonts are hosted by Google's server, and when used on a website, they can slow down the site's loading speed. To solve this issue, different methods have been developed to download Google Fonts locally and integrate them into a WordPress site without compromising the site's loading speed. In this article, we will discuss how you can download Google Fonts locally in WordPress.

Steps to Download Google Fonts Locally in WordPress

Step 1: Choose Your Fonts

Visit the Google Fonts website and browse through the hundreds of typefaces available. When you find the font you want, click the '+ Select this style' button. You can select multiple fonts by clicking the 'Add to Collection' button.

Step 2: Download Fonts

After selecting your desired fonts, open the collection tab at the bottom of the page and click the 'Download' button. A zip file containing your chosen fonts will start downloading.

Step 3: Unzip Fonts

Once the zip file is downloaded, unzip it to a specific folder.

Step 4: Upload Fonts to WordPress

Next, go to your WordPress dashboard and upload the font files to your WordPress theme or child theme's folder. This will allow you to use these locally hosted files in your website's CSS.

Step 5: Enqueue Fonts in WordPress

In the 'functions.php' file of your active theme, copy and paste the following code:

php if (!function_exists('custom_google_fonts')) { function custom_google_fonts() { wp_enqueue_style('custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), '1.0.0'); } add_action('wp_enqueue_scripts', 'custom_google_fonts'); }

This code will enqueue the CSS file containing your custom fonts and make them available for use on your website.

Step 6: Use in CSS

Once you have completed the above steps, you can start using your custom Google Fonts in your WordPress site's CSS. To use the font, simply add this code to the CSS:

css font-family: 'Font Name', sans-serif;

Replace 'Font Name' with the name of the font you downloaded and would like to use.

Conclusion

By downloading Google Fonts locally and integrating them into your WordPress site, you can improve your site's loading speed and enhance the user experience. With these simple steps, you can easily achieve this and enjoy the benefits of using Google Fonts in your website without any performance-related issues.