CODEWITHSUNDEEP
htmlcssfont-facecustom-font
wrongusername
wrongusername

Reputation: 18918

Custom font rendering problems

So I sometimes want to emphasize certain words like this:

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

At the same time, I would like to use a custom 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;
}

Example here.

Problem is, Chrome in Windows overlaps the span text:

chrome overlap

Firefox and IE don't seem to render the font smoothly:

looks jagged

Opera seems to render it just the way I want:

enter image description here

Can anyone tell me what's going on, and how I can fix these problems?

EDIT:

Sometimes I have that egregious problem in Chrome; sometimes I don't. And I have the latest Chrome installed, too:

enter image description here

Upvotes: 4

Views: 1608

Answers (3)

Wes Cossick
Wes Cossick

Reputation: 2933

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

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

Upvotes: 0

erikvdv1
erikvdv1

Reputation: 31

I had once exactly the same issue with Chrome. It appears to be related to the rendering of SVG fonts in Chrome. If you change the order of the font files in the @font-face so that the SVG is at the end of the list, the issue disappears. Your example on jsfiddle still renders incorrect in the current version of Chrome (29.0.1547.76), so the render bug is still present.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

The reason why Firefox and IE show the font the way they do is that h1 element has font-weight: bold by default, and you are declaring the font as normal weight. What this browsers do is arguably the correct move: in lack of a bold typeface, they algorithmically bold the letters.

To avoid that, add h1 { font-weight: normal; }. Alternatively, use a bold typeface of the font family.

The odd overlap in your Chrome sounds like an installation-specific problem, so you should first consider updating or re-installing Chrome.

Upvotes: 2

Related Questions