How to override browser font? - css

Question

I am newbie to CSS.
Specifically, now I am using IE8. My web page works fine with MS PGothic font in japanese script. But when we change IE8 browser font to Arial Unicode MS. The webpage does not look fine. This happens only in IE8, in firefox and chrome, even change is OK.
My problem is
I have so many CSS files more than 200.
So I want to change my browser font to MS PGothic for my website
or use only web page font not use browser font?
Which is possible? I want to know code sample for that. Any help is are greatly appreciated.
Before changing to Arial Unicode MS
After changing to Arial Unicode MS

Answer 1

It sounds like you need to specify the font in your CSS, which can be done this way (falling back to a sans-serif font):
body {
font-family: "MS PGothic", sans-serif;
}
If you have so many CSS files, however, the font-family value be overridden in one of them, so you might want to use the !important value, like this:
body {
font-family: "MS PGothic", sans-serif !important;
}
This can be improved further by including selectors for input and textarea so that form fields use this font as well:
body, input, textarea {
font-family: "MS PGothic", sans-serif !important;
}
We can also use the Japanese font name as well, just in case. Finally, I recommend specifying the Meiryo font which looks smoother than MS PGothic and is available on Windows Vista and above. Also, fonts for Mac should be included so I think the best CSS for Japanese pages is something like this:
body, input, textarea {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}