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
Follow these steps:
- Convert 'Raleway' font to web font using Transfonter.
- Download and upload the converted web font to WordPress via FTP or cpanel, ideally in the wp-content/uploads folder.
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');
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.
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.