Search code examples
typekit

Safari Eliminates Word-Spacing for H1 Tag That Uses Typekit

I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:

<div class="page-header">
  <h1 data-name="about">About Campaign Title</h1>
</div>

And here is the CSS:

h1 {
    font: 70px/normal "league-gothic", sans-serif;
    text-transform: uppercase;
    color: #4e4e4e;
}

I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.

Thanks.

Solution

  • This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:

    h1 {
    font: 70px/normal "league-gothic", sans-serif;
    text-transform: uppercase;
    color: #4e4e4e;
    text-rendering: auto;
}