Webfont Not Working in Chrome and Firefox

Question

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

Answer 1

So I found the font on fontsquirrel which is where I assume you downloaded it.

Fontsquirrel's own demo file doesn't work for me in Chrome, and their TTF format doesn't work in windows:

I would try to find a mirror for the file somewhere else and use that, or maybe its just straight up broken and you might have to find another option.