Lato' Font Rendering Odd in Safari, Not in Chrome, or Firefox

Lato' font rendering odd in safari, not in chrome, or firefox

I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/

However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.

Font rendering different on Mac firefox

Figured it out: Had to specifically set the font-weight to 100 a.k.a thinner using da CSS

Google Font not working on Safari

For some odd reason I have experience this on some web fonts from Google...when this has happened I usually get them to my server and/or convert them in fontsquirrel....Safari should be able to take TTF Files no matter what ver:

Nunito TTF ver

Google webfont Lato 100 and mobile Safari

Something I have seen to help really thin Fonts (Incidently also Lato) is this:

-webkit-text-stroke-width: 0.1px;

Anyway it's only a case by case basis, I would use a class / media query to make sure to only apply it when needed (safari(with a class set by js) on a scale under 1.0 or something). Try higher float values if needed.

---

Related Topics