1

I have an issue trying to call my custom font with a relative path when my code is in production. Everything works fine on my local setup.

Here is my folder organisation

-fonts
--Neil.eot
--Neil.woff
--Neil.ttf
--Neil.svg
-stylesheets
--style.css

And here is the custom font declaration, in style.css

@font-face {
  font-family: "Neil";
  src: url('../fonts/Neil.eot');
  src: url('../fonts/Neil.woff') format('woff'),
       url('../fonts/Neil.ttf') format('truetype'),
       url('../fonts/Neil.svg#Helvetica') format('svg');
  font-weight: normal;
  font-style: normal;
}

I have to use an absolute path to make it work in production. If anybody has a hint.

Jean-Baptiste
  • 1,552
  • 1
  • 19
  • 33
  • Please check with your prefered Browsers inspector the **Network** Tab and reload the page. It should show you which ressources are getting loaded. Your font should be not loaded. Right-click it and copy the Url, check if you can access it in a new window/tab. -- Either your path is somehow incorrect, your browser doesn't recognize it as a "safe" ressource or a caching problem. – AlexG Aug 30 '16 at 13:47
  • I may have found the cause, there is a cross-origin error because my website add a www. to every page, and the request comes from a www.** page to the website without the www. – Jean-Baptiste Aug 30 '16 at 13:56

1 Answers1

1

So, this was not a relative path issue but a cross-origin request error caused by misconfiguration in my wordpress. The website address was different from the wordpress address.

Thanks for taking a look!

Jean-Baptiste
  • 1,552
  • 1
  • 19
  • 33