0

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

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.