Custom Fonts Not Working On Site

[Stigan]

Hi there,

I’ve added custom fonts to my child theme, and usually there are no issues. I’ve added 2 fonts in this time, and neither is working. I’ve tried tweaking the code multiple times, and I can’t figure out why its not working on the site. Please help!

[ruenel]

Hello Adwin,

Thanks for writing in! I have logged in to your site and check your codes. It turns out that though you have the correct codes, the font files were not uploaded in your server.

To resolve your issue, please upload the other font files as well like the CaviarDreams.eot, CaviarDreams.woff, CaviarDreams.woff2, CaviarDreams.ttf files.

Hope this helps. Please let us know how it goes.

[Stigan]

Hi there,

They actually are all in there, I have no clue why only the svg files show up in the editor.

Any other ideas? Thank you

[nabeel]

Hi again,

I’m seeing 403 (Forbidden) errors for your font files (see https://mediatemple.net/community/products/dv/204644980/why-am-i-seeing-a-403-forbidden-error-message). It seems like they’re being blocked by your server or a security plugin.

First try replacing your code with the following code in your Child Theme’s style.css file and see if this resolves the issue:

@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreams.eot');
    src: url('fonts/CaviarDreams.eot?#iefix') format('embedded-opentype'),
        url('fonts/CaviarDreams.woff2') format('woff2'),
        url('fonts/CaviarDreams.woff') format('woff'),
        url('fonts/CaviarDreams.ttf') format('truetype'),
        url('fonts/CaviarDreams.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

If it doesn’t help then follow this article https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-403-forbidden-error-in-wordpress/

You can also contact your hosting provider regarding this error, most probably they will be able to fix it for you.

Let us know this goes!