0

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.

Community
  • 1
  • 1
Riskbreaker
  • 4,621
  • 1
  • 23
  • 31
  • So it looks like converting to Embedded (EOT) seems to do the trick after using this: http://www.fontsquirrel.com/fontface/generator .....only drawback it adds more files which i don't like(converting every otf I get)...but might be my only solution.. – Riskbreaker Jan 03 '13 at 21:25
  • why did this get a negative? – Riskbreaker May 15 '15 at 17:01

2 Answers2

3

I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.

An example for PT Sans

@font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
     url("ptsans.woff") format("woff"),
     url("ptsans.ttf")  format("truetype"),
     url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: "PT Sans";
    src: url("ptsans.svg") format("svg")
}
}

Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.

You should include ttf, eot, woff, and svg formats in your @font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your @font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.

JustAnotherCoder
  • 31
  • 2
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');

Riskbreaker
  • 4,621
  • 1
  • 23
  • 31