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, IE


Following is the CSS tried :

@font-face {
    font-family: 'Museo 500';
    src: url('../font/Museo500-Regular.eot');
    src: local('☺'), 
    url('../font/Museo500-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  • What OS are you running?
    – Brendan
    Commented Sep 10, 2012 at 12:48
  • I am using Linux platform. Commented Sep 10, 2012 at 14:08

1 Answer 1


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.

  • Please check this link, this is working on firefox and chrome but still not showing text clear. http://demo.techanveshan.com/triprental4/test.html Also, I had tested in IE7-8 this is not working :( Commented Sep 10, 2012 at 13:24
  • Issue with the font files. I’ll update my answer. Commented Sep 10, 2012 at 13:26
  • Thanks buddy, this has solved my problem!!!. Also I want to use one more font family [Myriad Pro] in the body of content. I had tried in typekit but they had charging to use that font. Do you know any site where I can try this font? Commented Sep 10, 2012 at 14:01
  • I got this solution for this question, simply you upload your font on the following link. They will convert the file into eot, otf, svg, ttf, woff as browser required. Also they will give css + HTML for testing the fonts in different browsers. font2web.com Commented Sep 10, 2012 at 14:58
  • 1
    As far as I know, Myriad Pro is a commercial product, and you would need to buy a license that allows web usage. Technically, if you have it, you can convert it to various formats and use it as a web font, but that’s risky—such usage can be detected, and they can sue you. It’s odd that font2web.com has the checkbox “I have checked the font license and it allows embedding og the font on a website” initially checked. Commented Sep 10, 2012 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.