Font looks distorted in windows

Question

Iam doing a website in ubuntu and finished with UI part. Everything was working smoothly in ubuntu but when i switched on to windows all the fonts are distorted. I tried the following code

@font-face {
    font-family: 'garrisonsb';
    src: url('../fonts/garrisons-bold.eot');
    src: url('../fonts/garrisons-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/garrisons-bold.woff') format('woff'),
         url('../fonts/garrisons-bold.ttf') format('truetype'),
         url('../fonts/garrisons-bold.svg#garrison_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'garrisons';
    src: url('../fonts/garrisons-regular.eot');
    src: url('../fonts/garrisons-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/garrisons-regular.woff') format('woff'),
         url('../fonts/garrisons-regular.ttf') format('truetype'),
         url('../fonts/garrisons-regular.svg#garrison_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rupee';
    src: url('../fonts/Rupee.eot');
    src: url('../fonts/Rupee.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Rupee.woff') format('woff'),
         url('../fonts/Rupee.ttf') format('truetype'),
         url('../fonts/Rupee.svg#rupeeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

the specified code is been generated using squirrel-generator. I tried with font-smooth property set to 'always' and also with -webkit-font-smoothing set to antialiased and the font-weight was also specified as 700 for regular and 900 for bold instead of 'normal', but nothing worked.

please suggest optimum solution......

Answer 1

When saying the problem stays within all the browsers it pops the question, is something wrong with your font or maybe something else? Can you try to do that with another custom font in Windows to see the result?

Though the solution @Madhu Rox provided is pretty cutting edge.

Answer 2

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.