Different font styles in different browsers.

[ArticSun]

Hi all!

New to the forum, so I hope I'll fit in .
I got a quick question about fonts in different browsers.

For a website I use just a regular arial font:
font: 11px arial;

It looks just fine and normal as I'm used to in Firefox, but in Internet Explorer and especially in Google Chrome the bold text is much, much "fatter" then it's supposed to be and how it is in Firefox.

Website: www.estreet.be (in development!)

Anyone with an idea on how to solve this problem?

Thank you!

P.s. Sorry for any spelling-errors, not native English speaking
P.p.s. Any additional questions? Please ask!

 

[Fireproofgfx]

I just went through the same thing with a cursive font I was using. You go to the link below and download the font you want to use on your site and they put it in a folder and you upload it to your server and add a the reference code to your page. Really simple, and google provides everything for free!!

http://www.google.com/webfonts#HomePlace:home

 

[chrisjohnson]

The simple answer to this is use fonts that are recognizable by all browsers. This makes it easier for you to create website design and save you from troubles down the road. Great link btw fireproof.

 

[Brian Angel]

The simple answer to this is use fonts that are recognizable by all browsers. This makes it easier for you to create website design and save you from troubles down the road. Great link btw fireproof.

Arial.. dosen't get to be a more basic font than that. Try doing a reset as each browser tends to have its own little style it likes to use. Also try switching from px to ems, see if that helps.

@Fireproofgfx - Font Squirrel, you'll love it.

 

[Absolution]

I think this is relevant to this. I have never used font face embedding. Does anyone here recommend it? Especially for solving problems like this? Also does anyone have a link to a page that has a good description of it?

 

[Brian Angel]

See Font Squirrel above.. evey site I do I embed.

 

[che09]

Arial.. dosen't get to be a more basic font than that. Try doing a reset as each browser tends to have its own little style it likes to use. Also try switching from px to ems, see if that helps.

I agree,Arial font considered to be basic.

Font Squirrel, you'll love it.

Anyone would definitely love this site!

 

[ArticSun]

Solved it by using arial.ttf with @font-face.
This seems to solve the problem in Chrome as well as in Internet Explorer.

Older browsers don't use the @font-face, so it falls back to the normal declaration which works fine in these older browsers.

Still wondering why I had problems with arial... never had these problems

 

[Phreaddee]

i've had this issue before with safari and suspect that it is a webkit issue where strong tags render the font substantially more bold than it need be.
I found using font-weight:700; instead in the css helped somewhat with this.