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");
}
You could check your path - one difference I see is that one reference begins with a forward slash and the other one doesn't.