So, I'm trying to import the StateFace font into a web app I'm working on. I'm using the following css:
@font-face {
font-family: 'StateFace Regular';
src: url('../fonts/StateFace-Regular-webfont.eot');
src: url('../fonts/StateFace-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/StateFace-Regular-webfont.woff') format('woff'), url('../fonts/StateFace-Regular-webfont.ttf') format('truetype'), url('../fonts/StateFace-Regular-webfont.svg#statefaceregular') format('svg');
}
.state {
font-family: 'StateFace Regular';
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.state.state-ak:before {
content: 'A';
}
.state.state-al:before {
content: 'B';
}
.state.state-ar:before {
content: 'C';
}
.state.state-az:before {
content: 'D';
}
.state.state-ca:before {
content: 'E';
}
.state.state-co:before {
content: 'F';
}
.state.state-ct:before {
content: 'G';
}
.state.state-de:before {
content: 'H';
}
.state.state-fl:before {
content: 'I';
}
.state.state-ga:before {
content: 'J';
}
.state.state-hi:before {
content: 'K';
}
.state.state-ia:before {
content: 'L';
}
.state.state-il:before {
content: 'N';
}
.state.state-ks:before {
content: 'P';
}
.state.state-ky:before {
content: 'Q';
}
.state.state-la:before {
content: 'R';
}
.state.state-ma:before {
content: 'S';
}
.state.state-me:before {
content: 'U';
}
.state.state-mi:before {
content: 'V';
}
.state.state-mn:before {
content: 'W';
}
.state.state-mo:before {
content: 'X';
}
.state.state-ms:before {
content: 'Y';
}
.state.state-mt:before {
content: 'Z';
}
.state.state-nc:before {
content: 'a';
}
.state.state-nd:before {
content: 'b';
}
.state.state-ne:before {
content: 'c';
}
.state.state-nh:before {
content: 'd';
}
.state.state-nj:before {
content: 'e';
}
.state.state-nm:before {
content: 'f';
}
.state.state-nv:before {
content: 'g';
}
.state.state-ny:before {
content: 'h';
}
.state.state-oh:before {
content: 'i';
}
.state.state-ok:before {
content: 'j';
}
.state.state-or:before {
content: 'k';
}
.state.state-pa:before {
content: 'l';
}
.state.state-ri:before {
content: 'm';
}
.state.state-sc:before {
content: 'n';
}
.state.state-sd:before {
content: 'o';
}
.state.state-tn:before {
content: 'p';
}
.state.state-tx:before {
content: 'q';
}
.state.state-ut:before {
content: 'r';
}
.state.state-va:before {
content: 's';
}
.state.state-vt:before {
content: 't';
}
.state.state-wa:before {
content: 'u';
}
.state.state-wi:before {
content: 'v';
}
.state.state-wv:before {
content: 'w';
}
.state.state-wy:before {
content: 'x';
}
It works fine in IE (9-11), but not in Firefox or Chrome. I've looked, and both browsers are pulling in the font file with 200 (or 304) responses with a content length > 0, but the content is not displaying in the font. The Glyphicons font that comes with Bootstrap is working fine, however, and the StateFace font works on other pages, so it must be something specific to my implementation. Does anything stand out as being off?
Edit: The css files are in ~/Content, and the font files are in ~/fonts
