Get 10% Discount On GeneratePress Premium Theme Avail Now

How To Host Google Fonts Locally In WordPress In 2020

Host Google fonts locally in WordPress and increase your site speed in GTmatrix and Google page Insights.

when you host google fonts locally on your server instead of using external resources, you will increase your site speed and get ranking your post fast by Google.

  • Save
How To Host Google Fonts Locally In WordPress

Benefits of Hosting Google fonts locally

Google fonts
  • Save
Google Fonts

When you launch a website and strat writing posts, you will get reduction in your site speed.

And there are many factors which reduce your site speed and Hosting google fonts externally is one of the reasons that our site speed gets slower.

Technically, when we host Google Fonts gives a great increase in page load times, because your visitor’s browser doesn’t have to load fonts from Google’s servers to retrieve the files.

Following are the benefits why we Should host Google fonts locally.

  • Reduce http requests
  • Website loads faster than ever
  • Your posts gets ranking in search engines results page(SERPS)
  • You will get no error in GTmatrix

Also Read : Remove URL Field From Comment Form In GeneratePress To Remove spamming

The Following screenshot tells about GTMatrix showing 4 HTTP requests.When our website was not hosting Google fonts locally :

GTMatrix scanning report
  • Save

Google Fonts At A Glance

Google fonts are an awesome library of many text fonts that are used in many themes.

But you will be surprised to hear that many website owners uses multiple fonts on their sites which lead to reduction in site speed.

That’s why I have written this article to help you increase your site speed.

Host Google Fonts Locally With Plugin

OMGF
  • Save

The best and easy way to host google fonts locally is to use the plugin.

The plugin name is OMGF. You can Easily install it

All you have to do is install the plugin from the WordPress repository, select your fonts, and click a few buttons.

  • From within your WordPress admin-area, go to Plugins > Add new.
  • Enter OMGF in the search bar.
  • Click ‘Install now’. Once it’s done, click ‘Activate’.

Steps To use OMGF Plugin

  • Save
  1. Go to Settings > Optimize Webfonts.
  2. Click ‘Auto-detect’ and wait for the on-screen instructions.
  3. Now visit you any post.
  4. After the page has finished loading, return to OMGF’s settings screen and click ‘Refresh’.
  5. Click ‘Download Fonts’ and wait for the command to complete.
  6. Click ‘Generate stylesheet’.

Host Google Fonts Locally In WordPress Without Plugin

In this method we will host google fonts locally without using any plugin in GeneratePress theme

Also Read : GeneratePress Theme Review : Best and lightweight theme ever

Step 1.

Visit Fonts.google.com

Visit the above website and select your desired font while searching.

Search fonts
  • Save

Step 2.

Download your desired font

Download font family
  • Save

And make sure to note down the embed code and css rule.And also change your font family accordingly.

Google fonts host locally
  • Save

Step 3.

Visit transfonter.org to convert your font file from .TTF to WOFF and WOFF2

Transfonter
  • Save

Step 4.

 After converting the fonts, go to your website cpanel > wp-content > uploads folder using FTP Client (file Zila).

Step 5.

 Create a new folder and name it “fonts” inside the “uploads” folder.

Step 6.

Upload all the converted fonts file to “upload” folder.

Step 7.

Now if you are using GeneratePress Proud theme, then go to Appearance > GeneratePress > Modules > Typography > Activate

Step 8.

Next we will use a CSS to do the remaining job.

Go to Appearance > Customizer > Additional CSS and Paste the following code.

@font-face { font-family: 'Questrail'; src: url('https://mysmartblogging.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff2') format('woff2'), url('https://mysmartblogging.com/wp-content/uploads/fonts/questrial-v9-latin-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

From the above image source URLs, replace with your website URL. If you are using CDN then replace the URLs with CDN.

Step 9.

Now we will use Code Snippets plugin to show the above Google font in our there’s Typography module.

Code snippets plugin
  • Save
Install Code Snippets Plugin

Click Code Snippets > Add New > Enter the Title and paste the following code and Activate it.

add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'Questrail'; return $fonts; } );

Step 10.

Now we will remove Google fonts from enqueing in GeneratePress theme.

Again go to Snippets > Add New > Give Title and paste the Below Code.

add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'generate-fonts' ); } );

Step 11.

Go to Appearance > Customizer > Typography and find your font family, select it in system fonts and Hit Publish

FAQs

Q1. How do I install Google fonts locally in WordPress?

Ans. You can install Google fonts locally in WordPress with OMGF plugin . Besides, you can also host Google fonts locally using CSS and code Snippets function.

Q2. How can I Download Google fonts ?

Ans. You can download Google fonts from fonts.google.com for free.

Q3. How I convert Google fonts from ttf to woff ?

Ans. You can convert Google fonts by visiting fontconverter.com

Q4. What is the benefit of hosting Google fonts locally in WordPress ?

Ans. When you host Google fonts locally in WordPress, it reduces http requests and you website loads much faster than before.

Q5. How can I host Google fonts locally in generatePress theme ?

Ans. Generatepress is the fast and lightweight WordPress theme.You can use Cife snippets, CSS, and child theme to host the fonts locally.

Wrapping Up

Finally, It is crystal clear that Speed of a website is one of the ranking factors, Google consider while ranking a post.

And if you host Google fonts locally, you will get blazing fast speed and get huge organic traffic.

As discussed above, you can host Google fonts locally with plugin or without plugin.

I personally use GeneratePress premium theme, DigitalOcean hosting and WProcket plugin on my website.

That is why I am getting super fast speed of my website.

Host Google fonts locally
  • Save

I am Kuldeep Singh a teacher by profession and blogger by great passion. You can learn here blogging related tips and tricks.

Leave a Comment

Share via
Copy link