How to host Google fonts in WordPress theme locally?

Question

I'm using a theme for my WordPress which uses 'Raleway' and it requests (13 requests in gtmetrix waterfall) it from Google fonts API. I want to keep using the font. However, I'm trying to reduce the number of requests and the size of my page. Can I include/integrate the fonts on my website so the browser won't have to execute any external requests? many thanks

Answer 1

Follow these steps:

1. Convert 'Raleway' font to web font using Transfonter.
2. Download and upload the converted web font to WordPress via FTP or cpanel, ideally in the wp-content/uploads folder.

3. Now,it's time for adding custom font to css. You will have to change the default URLs in stylesheet.css. For instance, your default URLs in stylesheet.css looks like this:

   src: url('Raleway-Bold.woff2') format('woff2'),
   url('Raleway-Bold.woff') format('woff');
   

   You have to change them in the following way:

   src: url('t9w8m8j8.stackpathcdn.com/http://yourwebsite.com/wp-content/uploads/fonts/Raleway-Regular.woff2') format('woff2'), url('t9w8m8j8.stackpathcdn.com/http://yourwebsite.com/wp-content/uploads/fonts/Raleway-Regular.woff') format('woff');
   

4. Finally test the Raleway font in a test page to check whether it is working or not.

You will find more information about these steps here.

Answer 2

This can be done using a child theme: https://www.cssigniter.com/add-custom-fonts-wordpress-website-using-child-theme I recommend that you test website load speed before and after the change, to make sure there's no negative effect. It is recommended to use a CDN such as Google's.