Custom Font Display Issues

Question

Therefore, I sometimes want to emphasize some words as follows:

<h1>I want to <span class="emphasis">emphasize</span> some text.</h1> 

At the same time, I would like to use my own font for h1 text:

 @font-face { font-family: 'MuseoSlab'; src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot'); src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype"); font-weight: normal; font-style: normal; } 

An example is here.

The problem is that Chrome on Windows overlaps the range text:

Firefox and IE do not display the font smoothly:

Opera seems to do it the way I want:

Can someone tell me what is happening and how can I fix these problems?

EDIT

Sometimes I have this glaring problem in Chrome; sometimes I don’t do it. And I have the latest Chrome installed:

Answer 1

The reason Firefox and IE show the font in such a way that the h1 element has font-weight: bold by default, and you declare the font as normal weight. What these browsers do is probably the right step: in the absence of a bold font, they algorithmically shift letters.

To avoid this, add h1 { font-weight: normal; } h1 { font-weight: normal; } . Also use bold type font family.

An odd match in your Chrome resembles an installation issue, so you should first consider upgrading or reinstalling Chrome.

Answer 2

I had the same issue with Chrome. This seems to be related to rendering SVG fonts in Chrome. If you reorder the font files in @font-face so that SVG is at the end of the list, the problem goes away. Your jsfiddle example is still not displaying correctly in the current version of Chrome (29.0.1547.76), so a rendering error is still present.

Answer 3

Hope this helps someone in the future, but I was able to fix this problem by following the solution to the following question: Chrome svg-Font-Rendering breaks Layout

This successfully fixed non-smooth edges without breaking the layout and / or crisp fonts.