Question

Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:

I have a web font and adding it with css3…Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:

I tried this: -webkit-font-smoothing: antialiased;

…Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?

I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing

Here is what i have:

@font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }

Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering

….Not sure if there is something else that can resolve this.

Answer 1

So my solution was to convert this to embedded Open Type:

.eot and also add .woff for other browser support.

This is actually great because it works fine in IE9 (even IE8)

🙂

src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');