Using #font-face causes different characters to display in Safari - css

Question

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:
Why is that, and more importantly, how can I fix this?
These fonts are available here.

Answer 1

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';
}