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.

Go to the google-webfonts-helper tool
Open the google-webfont-helper in a browser window
Select your Google font
Search for, and then click the name of, the Google font you want to use.
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).
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
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.
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).
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.