failing to display a custom font

I think this is a pretty common issue. I just spent an hour trying to figure out what’s wrong… my custom wordpress theme doesn’t display a custom font.
Here’s the code:

@font-face {
font-family: Proxima;
src: url(fonts/ProximaNova-Regular.otf);  
}

It’s strange, because I have another instance of the exact same WP site on a different host and that works just fine.. wordpress is driving me crazy sometimes.

Any ideas on how to solve this?
Thanks

Solutions Collecting From Web of "failing to display a custom font"

@Mike94,

Upon looking at your site I noticed this while viewing the style.css file (wp-content/themes/mima/style.css?ver=325):

@font-face {
font-family: Proxima;
src: url(../fonts/ProximaNova-Regular.otf);
}

Thus, what is being asked for is wp-content/themes/mima/../fonts/ProximaNova-Regular.otf (which does not exist); however, I did find the font file by removing the ../ from the src.

However, on viewing your site, I also encountered another issue:

Redirect at origin 'http://www.misiamariina.sk' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://misiamariina.sk' is therefore not allowed access. misiamariina.sk/:1

This message showed in Chrome. It appears that http://www.misiamariina.sk is redirected to http://misiamariina.sk, but all of your resources advertise themselves at the www. address. Your http server has apparently denied access to at least one file (which I believe to be the font file in question), and so your CORS policy restricts you from automatically downloading this resource. How you address this depends on your environment:

  • IIS
  • Apache
  • Nginx