: Museo Font get distorted in browser I am facing some problems with font rendering in different browsers. I tried to add a custom font and font get distorted in browser like firefox, chrome,

@Megan533

You have defined a font with weight 500 (demi bold), but it is used inside an h1 element which has weight 700 (bold) by default. You can add

h1 { font-weight: 500; }


I did not check all the uses of the font. If it appears in normal, non-bold text, you should set its font weight to 500, too. If you want different weights, you need a different font file and a separate @font -face rule for each.

(If the value of the CSS font-weight property and the actual weight of the font do not match, browsers may do ugly things like algorithmic bolding. This depends on the weights and on the browser.)

Update: There is additionally a problem with the font files you are using. Only the EOT file (recognized by IE only) seems to be OK. I’d recommend using the font distributions announced on the web site of the author, such as Fontspring. At Fontspring, you need to sign up in order to download fonts, but many fonts are free of charge, like Museo in weight 500.

Vote Up Vote Down