Browser Does Not Render Woff Fonts (@Font-Face)

Browser does not render WOFF fonts (@font-face)

Bingo. I took it step by step, and after few tries I realized, that If I use original kit WOFF fonts actually work, after that I realized that my code actually works too, but only if it is run from the file system directly, not trough IIS. Once I realized that some googling led me to answer:

http://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/

Basically under IIS7 you need to configure mime type for WOFF fonts, otherwise IIS does not serve them.

Text (@font-face: *.woff) rendering with gaps

I recommend you use different extensions for different purposes. As different browser does not render fonts the same way.

There are way to generate these fonts into .ttf/.eot/svg formats

Ideally the font css should be of all formats like this

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

In the end, sometimes the font is not good enough that it do not render correctly then you would have to fallback to google fonts.

I used theses in the past

http://everythingfonts.com/otf-to-eot
http://www.font2web.com/

However my problem was different, it was that the font was not high-def enough.
For your case it might just be the font-type works differently for different browsers

Do let me know of the results!
Good Luck

Font-face embedded fonts look fuzzy in Windows 7 browsers

Try the http://www.fontsquirrel.com/fontface/generator generated markup.

Chrome not rendering @font-face ttf/woff smooth

maybe this css property solves your problem:

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

---

Related Topics