• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Public Mailchimp Classes
    • Mailchimp Training – Group
    • Mailchimp Training – 1-on-1
    • Mailchimp Consulting
  • Content
    • Blog
    • Mailchimp Tutorials on YouTube
  • Contact & About
    • Contact
    • About

How to host Google fonts locally in WordPress (and boost Core Web Vitals SEO)

Google is about to factor Core Web Vitals (Largest Contentful Paint, Cumulative Layout Shift and First Input Delay) in the ranking of websites in search results. Aligned with this, Google Chrome is no longer supporting third-party cookies. In line with these two activities I’ve been looking at how to improve my Core Web Vitals scores.

Why using Google Fonts CDN hurts your website ranking

It used to make sense to use web-fonts hosted on a third-party site such as Google Fonts and Font Awesome (using the Font Awesome CDN to deliver the fonts). The benefit was that if a website using the same font had been visited in the same browser, then the font would be cached and therefore speed up webpage load times. Now that browser caching usually applies to a specific website only, there is no benefit to using a third-party CDN to deliver fonts. Furthermore it is actually detrimental to your Core Web Vitals scores to use a third-party CDN to deliver fonts because of the extra overhead of DNS lookups needed.

How to host Google fonts locally to improve Core Web Vitals

We know that any web-fonts you use should be hosted on your domain for SEO reasons. So how can we host Google fonts on our domain? Fortunately Mario Ranftl has create the awesome google-webfonts-helper tool. The tool makes it incredibly simple to host Google fonts locally whether you use WordPress or most other website builders. Here is how to use the tool to install Google fonts locally on your WordPress website.

Time needed: 30 minutes

We know that any web-fonts you use should be hosted on your domain for SEO reasons. So how can we host Google fonts on our domain? Fortunately Mario Ranftl has create the awesome google-webfonts-helper tool. The tool makes it incredibly simple to host Google fonts locally whether you use WordPress or most other website builders. Here is how to use the tool to install Google fonts locally on your WordPress website.

  1. Go to the google-webfonts-helper tool

    Open the google-webfont-helper in a browser window

  2. Select your Google font

    Search for, and then click the name of, the Google font you want to use.

  3. Choose your options

    In items 1 and 2 at google-webfont-helper choose your desired options. In item 3 (‘Copy CSS’) click ‘Modern Browsers’ (this will prove faster than supporting very old browsers).

  4. Download and extract the Google font files

    Download the .zip file provided in the ‘4. Download files’ section. Once downloaded extract the files from the .zip file

  5. Add the Google font to your server

    Using an FTP client or a file manager (e.g. in cPanel) go to wp-content -> uploads. Create a folder called fonts and upload the Google font files as extracted in step 4 above to this folder.

  6. Amend the path to your Google fonts

    Going back to the google-webfonts-helper tool, change the field ‘Customize folder prefix (optional):’ under ‘3. Copy CSS’ to be https://example.com/wp-content/uploads/fonts/ (change example.com to be your domain name).

  7. Add CSS to load the Google fonts in WordPress

    Copy and save the CSS provided under ‘3. Copy CSS’ and to a CSS editor in WordPress. JetPack have a great custom CSS tool available but there are many other plugins that will allow you to add custom CSS.

Note: If you use a WordPress Genesis them or child theme then learn how disable Genesis from automatically loading fonts from the Google Fonts CDN.

Found this useful? Please share:

  • How to get better SEO in Genesis By Stopping Google Fonts CDN [WordPress Instructions]
  • Get Font Awesome working in Firefox
  • How to host Font Awesome in WordPress (Fixed)

Filed Under: WordPress April 2021

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

Add a survey (and answers) into a Mailchimp email.

Create high-converting buttons in Mailchimp.

Reader Interactions

Leave a ReplyCancel reply

You are here: Home / WordPress / How to host Google fonts locally in WordPress (and boost Core Web Vitals SEO)

Primary Sidebar

Get Mailchimp Class Updates

Get class updates

Mailchimp write about my work

Read on Mailchimp.com

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Get class updates

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

gary@organicweb.com.au
0410923445

Copyright © 2023 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service