Search code examples
cssfontssafarifont-face

Using @font-face causes different characters to display in Safari

I've added a font face to my website using this code:

@font-face {
    font-family: 'ChunkFive-Roman';
    src: url('/css/font/ChunkFive-Roman.eot') format('eot'), 
         url('/css/font/ChunkFive-Roman.otf')  format('opentype'),
         url('/css/font/ChunkFive-Roman.woff') format('woff'), 
         url('/css/font/ChunkFive-Roman.ttf')  format('truetype'),
         url('/css/font/ChunkFive-Roman.svg#ChunkFive-Roman') format('svg');
}

This works okay on XP in all browsers except Safari:

enter image description here enter image description here

Why is that, and more importantly, how can I fix this?

These fonts are available here.

Solution

  • found an article on this issue: WEBKIT (SAFARI 3.1) AND THE CSS @FONT-FACE DECLARATION

    The CSS spec section for @font-face is very specific - typefaces are to be selected based on a wide array of criteria placed in the @font-face declaration block itself. Various textual CSS attributes may be defined within the @font-face declaration, and then they will be checked when the typeface is referred to later in the CSS. For instance, if I have two @font-face declarations for the Diavlo family - one for regular text, and one for a heavier weighted version of the typeface - then I later utilize Diavlo in a font-family: attribute, it should refer to the basic Diavlo font defined in the first @font-face. However, if I were to do the same, but also specify a heavy font-weight:, then it should use the heavier version of Diavlo. To place this example in code:

    @font-face {
  font-family: 'Diavlo';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo';
  font-weight: 900;
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo';
  font-weight: 900;
}

div#content {
  font-family: 'Diavlo';
}

    As you can see, my headings should use the typeface defined in Diavlo_Black.otf, while my body content should use Diavlo_Book.otf. However, in WebKit, this doesn’t work - it completely ignores any attribute except font-family: and src: in a @font-face declaration! Completely ignores them! Not only that - not only that - it disregards all but the last @font-face for a given font-family: attribute string!

    The implication here is that, to make @font-face work as it is currently implemented in WebKit (and thus, Safari 3.1), I have to declare completely imaginary, non-existent type families to satisfy WebKit alone. Here’s the method I have used in the places I current implement @font-face:

    @font-face {
  font-family: 'Diavlo Book';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo Black';
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo Black';
}

div#content {
  font-family: 'Diavlo Book';
}