Host Google Font In WordPress Locally Without Plugin

Do you want to Host Google Font in WordPress Locally without using any plugins? Then you are landed in the right place. This guide will show you how to download & host (.woff) custom Google font in WordPress without a plugin.

We will walk you through downloading Google Fonts from the official Google Fonts website and uploading them to your own hosting. We use Hostinger in this guide, but the steps work the same for any hosting.

Hosting our Google font on our own server increases the speed of the website & avoids the annoying error in page speed insights.

This Tutorial will Teach You How To Host Google Font In WordPress Locally By Without Installing Extra Plugins. Installing Plugin For Doing Simple Task Can Make Your Website Load Slow.

Plugins Come With a Lot Of Additional Files Which Take Resources and also increase the number of HTTP requests made to the server.

Also Read: How To Add Table Of Content In Blogger

Advantages Of Hosting Google Font Locally

1. Increases The Speed Of Website
2. Avoid The Webfonts Error In Page Speed Insights
3. More Control Over Font Caching
4. No Dependencies On Third Party Services

Also Read: Blogger Template Development From Scratch

How To Host Google Font In WordPress Without A Plugin

Step 1: Go To Google Fonts & Search For The Font That You Like. I am going to use Poppins font.

Step 2: Click On the Get Font Button As Shown In the Following Image:

Step 3: Click On Download The Font As shown In the Following Image:

Step 4: Extract The Font Folder & Name The Folder Font As Shown In Following GIF:

Step 5: Go To The File Manager Of Your WordPress Hosting And Navigate to the Public_HTML Folder As shown in the following Image:

Step 6: Open The Public_html Folder & Upload the extracted font folder In the previous step as shown in the following image:

Step 7: Now Our Almot Work Is Done. Now Go To Theme Filer Editor Of Your WordPress Website as shown in the following Image:

Step 8: Identify and open the main style.css file of your WordPress theme & paste the following code ( Font-face ) as shown in the following image:

@font-face {
font-family: 'Poppins';
src: url('https://javascriptsmagic.com/Font/Poppins-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}

Step 9: Update the source URL. The source URL is structured as:

src: URL(‘{Website Name} /Font/Regular Font File.woff { format(‘woff’) }’)

You have to replace the URL with your website URL. Then go to the font folder that we have uploaded in previous steps copy the file name of the regular font and place it in the above URL Structure:

Testing Our Changes: Host Google Font In WordPress

To Test The Font That We Have Hosted On The Local Server We Have To Clear The Cache Both From The Server & From our browser To See The Changes.

You Can Clear The Cache Of Your Website If You Are Using Any performance optimization Plugin. To Clear Cache From Your Browser Press the ‘CTRL + SHIFT + Delete’ Key.

To Verify The Font Is Loading From Our Own Server You Can Check From The Dev Tools Available On Your Browser As Shown In the Following Steps:

1. Open Developer Tools: Right-click On Your Website And Select Inspect Or Press Ctrl+Shift+I (Cmd+Option+I on Mac).
2. Go to Network Tab: Click The Network Tab To Monitor Resource Loading.
3. Reload The Page: Reload Your Page While Keeping The Network Tab Open To See If The Font Files Are Being Fetched From Your Server.
4. Check Font Files: Look for the font files (e.g., .woff2, .woff) to ensure they are being served from the local server path.

Conclusion On: Host Google Font In WordPress

I Hope You Understand How You Can Host Google Fonts in WordPress Locally. But There Are Things You Need To Keep In Mind Will Avoid The Errors Like Fallback Fonts Appearing & Fonts Not Displaying Properly.

These Errors Are Caused To Incorrect File Paths, Browser Compatibility, Incorrect Font Weight Styles & Cache Issues.

You Also Need To Keep An Eye On Performance Issues Which Are Due To Hosting Google Fonts in WordPress Locally. To Avoid performance issues Consider The Following Steps:

1. Use Only Neccesory Weights & Styles | Compress Font Files
2. Preload The Font File: <link rel=”preload” href=”/wp-content/themes/your-theme/fonts/YourFontName.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
3. Use Font Display Property “font-display: swap;”

About Author