Backed by Awesome Motive.
Learn more on our Seahawk Blog.

How To Optimize Google Fonts For WordPress?

Written By: author image Komal Bothra
author image Komal Bothra
Hey, I’m Komal. I write content that speaks from the heart and makes WordPress work for you. Let’s make your ideas come alive!
how-to-optimize-google-fonts-for-wp

It’s easy to use Google Fonts in WordPress. It’s a free directory of over 800 web fonts you can use on your website. The Google Fonts service is a top-rated free service used by millions of WordPress websites to enhance their website appearance and usability. Here’s how to use Google fonts on WordPress without compromising site performance & improving your PageSpeed scores.

Method 1: Host Google Fonts on your WordPress Server

Step 1: Choose A Google Font

Using fewer Google Fonts will reduce requests (fewer fonts = fewer requests).

Select Font Weights Carefully – The number of font weights you use will also affect the speed at which your page loads. To ensure that Google Fonts only load the weights you need, uncheck the others so that only the consequences you need are packed.

Step 2: Download The Font

Downloading the font is the second step in the process. It is important to note that Google will automatically download all font weights, so selecting font weights is not required at this stage. Instead, the selection of font weights is needed for step three.

Step 3: Convert Fonts To Web Fonts

Click the Add Fonts button on their site, select only fonts you will use on your website, and upload them. It is a roboto-regular.ttf file and a roboto-bold.ttf file, so both weights are included. As WOFF and WOFF2 cover all significant browsers, leave the settings as they are. Click the Convert button to begin the conversion process.

Step 4: Download Converted Font Files

As soon as the fonts have been converted, you can download them. Since two fonts have been downloaded to our computer, we will have a total of 4 font files in the zip file (since we downloaded two fonts, we will have four font files in the zip file).

Step 5: Upload Font Files To WordPress Files

Please ensure the web font files are uploaded via FTP or cPanel, ideally in the wp-content/uploads folder, to avoid being overwritten by theme and core updates. We uploaded the fonts to a “fonts” folder (so they would be separated from other files). You should be able to download the fonts after you open the links in your browser, so you can confirm they were successfully uploaded.

Step 6: Add Custom Font To CSS

After downloading the zip file, we will add the stylesheet.css CSS in the file. The CSS code below connects your fonts to your existing CSS and makes them available.

You can place the CSS code in functions.php or start your style.css file. An external CSS file or WordPress’ wp_enqueue_style function can be used in the CSS code. In the default style.css file of the theme, we’ll paste it. Replace any relative URLs with absolute URLs by copying/pasting the code into the stylesheet.

Theme default URLs in stylesheet.css:

src: url(‘Roboto-Bold.woff2’) format(‘woff2’),

url(‘Roboto-Bold.woff’) format(‘woff’);

Change to:

src: url(‘https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2’) format(‘woff2’),

url(‘https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff’) format(‘woff’);

To easily use the font in the current HTML, create a custom class. CSS Classes roboto_font and roboto_bold_font.

.roboto_font {

  font-family: “Roboto”, “Arial”, sans-serif; }

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;

font-weight: bold;

}

Step 7: Set The Default Font

To make this font the default font on your website, you must include the CSS code in your style.css file.

You may have to debug or edit the font to replace existing font-family properties.

The next step is to upload the stylesheet.css file you have obtained inside your file named stylesheet.css and add the CSS. The CSS code below will make your fonts work with your existing CSS and be ready to be used as soon as you enter it. You can use an external stylesheet or the WordPress function wp_enqueue_style to enqueue stylesheets.

Method 2: Preload Web Fonts – Above the Fold Optimization 

If you’re using Google Fonts, you may need to refer to the style sheet that was prepared by Google and sent to your WordPress website from Google’s servers. When you use the developer tool offered by Google Chrome to inspect your website, you may get a glimpse of the process behind the scenes. There is a possibility that you may see two entries for Google Fonts inside Source. 

Please see the picture that has been attached here.

Pre-load Web Fonts

When you click on the fonts.googleapis link, you will learn that the stylesheet for which you produced the URL is shown on the open page. In addition, a call is made to the specific font file for every font-face declaration.

fonts URL

This indicates that the user has to visit fonts.gstatic.com to get the necessary weight for the font if a different font-weight is used. This step may lengthen the time it takes for your WordPress page to load. 

Therefore, access the functions.php file for your current theme, and enter the following PHP code within the function that is responsible for managing fonts.

function twentyeleven_resource_hints( $urls, $relation_type ) {

   if ( wp_style_is( ‘rumi-fonts’, ‘queue’ ) && ‘preconnect’ === $relation_type ) {

      $urls[] = array(

         ‘href’ => ‘https://fonts.gstatic.com’,

         ‘crossorigin,’

      );

   }

   return $urls;

}

add_filter( ‘wp_resource_hints’, ‘twentyeleven_resource_hints’, 10, 2 );

Method 3: Optimize Google Fonts WordPress Using Plugin

Plugins, as is the case with most WordPress-related tasks, make it much simpler to optimize Google Fonts. In addition, they will take care of the software aspect for you, so you won’t have to be concerned about where the code should go in the system.

If you have Google Fonts installed on your WordPress website and run a performance test using PageSpeed Insights or GTmettrix, you will get the following error message: fonts.googleapis.com. 

It occurs because Google Fonts are not compatible with the WordPress platform. It indicates that your WordPress site needs to have its Google Fonts optimized.

A free plugin can be used for the fixation of the same. It is – OMGF | Host Google Fonts Locally

After completing the installation, the plugin will immediately begin switching the WordPress wp en queue script()Google Fonts method to the wp head() function. This plugin does everything on its own. 

Find more such articles at Seahawk Media.

Related Posts

Encountering the “Sorry, you are not allowed to access this page” error in WordPress is

As businesses evolve, their content management system (CMS) needs to adapt to growing demands for

Are you thinking about switching from Craft CMS to WordPress but unsure where to start?

Komal Bothra October 3, 2024

Fix the “Sorry, You are Not Allowed to Access This Page” Error in WordPress

Encountering the "Sorry, you are not allowed to access this page" error in WordPress is

WordPress
Komal Bothra October 1, 2024

How to Migrate from Strapi to WordPress?

As businesses evolve, their content management system (CMS) needs to adapt to growing demands for

WordPress
Komal Bothra October 1, 2024

How to Migrate Craft CMS to WordPress: Step-by-Step Guide

Are you thinking about switching from Craft CMS to WordPress but unsure where to start?

WordPress

Get started with Seahawk

Sign up in our app to view our pricing and get discounts.