Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

http://demo.techanveshan.com/triprental4/listing.html

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;
}
share|improve this question
    
What OS are you running? –  Brendan Sep 10 '12 at 12:48
    
I am using Linux platform. –  Rakesh Vadnal Sep 10 '12 at 14:08
add comment

1 Answer 1

up vote 5 down vote accepted

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.

share|improve this answer
    
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 :( –  Rakesh Vadnal Sep 10 '12 at 13:24
    
Issue with the font files. I’ll update my answer. –  Jukka K. Korpela Sep 10 '12 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? –  Rakesh Vadnal Sep 10 '12 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 –  Rakesh Vadnal Sep 10 '12 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. –  Jukka K. Korpela Sep 10 '12 at 16:52
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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