Problems with cross-browser appearance (Font rendering & background brightness)

[Koopa]

Hey guys, i can’t understand how a h1 and a background-image applied to the body can look so different in different browsers….

Here an example: http://cl.ly/image/1F3D352h1r2o

Are there any tricks to get that fixed ? It should actually look like in Safari ;)

Many thanks

[Paulie_D]

That looks like a custom font…that might be the initial starting point.

[Koopa]

yes it is but why thats a problem?

[Paulie_D]

Because different browsers use different font files and there are rendering differences as you have noticed.

Can you provide a link to a live site or show us the CSS for how you have implemented the font?

[Koopa]

http://codepen.io/Koopax/pen/Ldxeu

I already tried to use an svg for that purpose that there also a rendering problem :(

[TheDoc]

For Chrome you can try using:

-webkit-font-smoothing: antialiased;

As for the background image, I opened it up in Safari, Chrome and Firefox and it was identical in each. Are you using the same computer to test out the different browsers? Nothing should cause a difference like that unless you’ve got some separate CSS going on.

[Koopa]

Thanks for your reply.

No, i’m using the same computer for testing which is running OS X Mountain Lion
And there’s only 1 CSS

[Koopa]

-webkit-font-smoothing: antialiased; brings no improvment

and I actually linked the wrong pattern, it is not the same as from subtle patterns.com, I darked it up using Photoshop…

Quite strange all that stuff… I will try JPEG perhaps PNG is going crazy ;)

[Koopa]

Only the font rendering bug is left :)

[Author]

Posts