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?

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


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 '' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

This message showed in Chrome. It appears that is redirected to, 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