Font renders fuzzy and jagged when rotated on windows 7

Question

http://stage.bravo-company.info/panaplast/index2.php/

link above, i realised that the font on the navigation sidebar (on the right) appears extra-thin and jagged/fuzzy when viewed on chrome/ie/ff on windows 7.

i read about the cleartype thingy, but to me the other fonts appear acceptable except for the rotated ones on the sidebar nav.

the font 'vitesse' is css embedded using font-face. but i disabled the font and used a default web font, but the problem persists.

something to do with my css syntax? how do i fix this?

EDIT: screenshot here:

Answer 1

Web fonts are not smooth in all the browsers. You may have to use -webkit-font-smoothing: antialiased for web-kit browsers.

You better use text-shadow: 0px 0px 1px #GOOD-COLOR-HERE or text-shadow: 0px 0px 1px rgba(COLOR-SETTINGS-HERE) and tweak the color settings and shadow for the best result.

Found on another Question similar to yours. Other Post

Also. This Post

How well web fonts are rendered depends on 5 things;

How suitable is the design of the typeface? How well is the font hinted? From which font delivery service is it being served? What font size is being used? On what system configuration is it being viewed? For more info: http://elliotjaystocks.com/blog/choose-your-web-fonts-wisely/

Answer 2

You are still using the vitesse font:

$("#link-home").css("font-family")

returns

"vitessel"

I overrode with Arial and it works fine, looks like it's just a problem with the font maybe?

Answer 3

Web fonts are not smooth in all the browsers. You may have to use -webkit-font-smoothing: antialiased for web-kit browsers.

You better use text-shadow: 0px 0px 1px #GOOD-COLOR-HERE or text-shadow: 0px 0px 1px rgba(COLOR-SETTINGS-HERE) and tweak the color settings and shadow for the best result.

Found on another Question similar to yours. Other Post