1

I'm using an icon font to display icons on a web page. The font is loading correctly through a css file referenced in HEAD. The file is located on an external asset server. Let's say

http://assets.example.com/css/fonts.css --> http://assets.example.com/css/fontfile.woff etc

I'm referencing these icons in both HTML and various javascript files (loaded at the bottom of the page). 

<span class="icon icon-info"></span>

I'm seeing 404 errors in both Chrome and FF with the browser trying to load the font from the page location.

http://www.example.com/jobs/1/fontfile.woff

What seems to be happening is that during Javascript processing, the browser doesn't recognize that the font has already loaded or is supposed to be loaded from a different location. It subsequently tries to load the font file from the current location

I'm using Bootstrap and yui3, but that seems irrelevant.

Any ideas on how to fix this?

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Marc
  • 6,773
  • 10
  • 44
  • 68
  • You should use http://example.com for example URLs; unless you are actually working on http://server.com? – James Donnelly Feb 24 '14 at 14:49
  • Try using absolute URLs. – Mark Feb 24 '14 at 14:49
  • Here is a possible answer : http://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files – HackerKarma Feb 24 '14 at 14:50
  • I'm on Mac OS and I tried adding the mime type to the (nginx) webserver. That didn't work for me. – Marc Feb 24 '14 at 17:16
  • Hmmm, it might have something do with the fact that I'm using LESS and on the fly LESS processing for development. Going to "normal" stylesheets seems to fix the problem – Marc Feb 24 '14 at 17:22

0 Answers0