0

I'm building a website that uses two purchased fonts, both .woff. One loads correctly, the other doesn't, and the console logs an error 'File not found'. A quick Google suggested this might be the solution: Why is @font-face throwing a 404 error on woff files? However, if this was the case, surely the other woff file wouldn't load either? What on earth is going on? The first font works, the second does not.

@font-face {
font-family: UnitSlabBlack;
src: local('☺'), url("/fonts/UnitSlabWeb-Black.eot");
}

@font-face {
font-family: UnitSlabBlack;
src: url("/fonts/UnitSlabWeb-Black.woff") format("woff");
}

@font-face {
font-family: UnitSlabLight;
src: url("/fonts/UnitSlabWeb-Light.eot");
}

@font-face {
font-family: UnitSlabLight;
src: url("fonts/UnitSlabWeb-Light.woff") format("woff");
}
Alex Clark
  • 1
  • 2
  • Please add some code to help other assist you as detailed here: [https://stackoverflow.com/help/mcve](https://stackoverflow.com/help/mcve) – Julio Feferman Sep 12 '17 at 14:45
  • Apologies, added code – Alex Clark Sep 12 '17 at 14:49
  • Thanks. You could check your path - one difference I see is that one reference begins with a forward slash and the other one doesn't... – Julio Feferman Sep 12 '17 at 14:59
  • Fixed - extremely dumb mistake in hindsight. Thanks so much! – Alex Clark Sep 12 '17 at 15:17
  • Great! I'll add that as an answer so the question can be responded. – Julio Feferman Sep 12 '17 at 15:19
  • On a webdev note, there is no version of Internet Explorer supposed by Microsoft anymore that supports `.eot` but does not support `.woff`, so unless you are targetting browsers with the same status as Internet Explorer 4, just using woff will first reduce your problem surface, and once solved, yield something easier to maintain. With that said: *make sure your case matches the file's* because not every OS and HTTP server is case insensitive – Mike 'Pomax' Kamermans Sep 12 '17 at 16:59

1 Answers1

0

You could check your path - one difference I see is that one reference begins with a forward slash and the other one doesn't.

Julio Feferman
  • 2,658
  • 3
  • 15
  • 26