Custom fonts not displaying in browser

Good day. I have had a site online for months now and everything has been fine. Today, I happened to view the site and noticed that all of the fonts have reverted to a generic serif font. I built the site with a custom font using the font manager, (see attached) and added the font “founders-grotesk”. It is still showing in the font manager as the Body and Header font, yet it is not displaying correctly in the browser. I have made no changes, so this seems to have just happened on it’s own. Please advise.

Hello @mcaravaglia,

Thanks for writing in! The issue could be just your browser cache or just caused by a plugin cache. Please do the following:

If the above suggestions does not work, we would love the check the page if you can give us the URL. We would also be happy if we can log in to the site as well. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

I’ve just noted the error below appearing in the Console tab of Chrome Dev Tools. I have no idea what this is about; do you recognize this error?

Access to font at ‘https://www.phygicode.io/wp-content/uploads/2022/02/founders-grotesk-light.woff2’ from origin ‘https://phygicode.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Hey @mcaravaglia,

Thank you for checking the console and telling us the error that you see. The cause of that is your web host. Check out the guides related to the CORS errors here: https://theme.co/docs/font-awesome-icon-issues.

Ultimately though, it is your web host that must fix that issue. Our theme is loading the font correctly.

Thanks.

Agreed. Thanks Christian.

You’re welcome, @mcaravaglia.

Thanks for pointing me in the right direction; the issue is resolved. For anyone else inquiring about this, I added the code below to the .htaccess file. It immediately fixed the issue. This thread can be closed now.

<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
1 Like

Hi @mcaravaglia,

Glad that we are able to help you, and thanks for sharing the solution with others.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.