Embedded fonts B and I not working on safari 3.2 - css

Question

I have embedded fonts to my webpage and randomly in the divs i use font-style = italic and font-weight=700.
My #font-face rule is:
#font-face {
font-family: 'Arimo';
src: url('fonts/arimo_bold_italic.eot');
src: url('fonts/arimo_bold_italic.eot?#iefix') format('embedded-opentype'),url('fonts/arimo_bold_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Though the font-style and font-weight additions are working fine on all the browsers, it does not seem to work on Safari 3.2 giving weird results like the style and weight being applied only sometimes at random.
Any solution?

Answer 1

You are specifying the typeface as normal weight, regular (not italic). This is possible and often used to overcome some browser limitations, and it is also the way FontSquirrel uses in the CSS files it generates. But is has its implications.
In this case, font-family: Arimo alone produces bold italic Arimo, since this is how you have defined the name Arimo. To a browser, Arimo is just a normal-weight regular font, so if you ask, in CSS or indirectly e.g. via b or i markup, it to be used in bold face or italic, most browsers will use the font as such.
According to the CSS 2.1 font matching algorithm, when italic (or bold italic) is requested for, a regular face is not considered a match. This means that the browser should fall back to its default font, unless your rule specifies a secondary font. No browser actually does this: Safari produces “synthetic italic” by algorithmically slanting glyphs, whereas most other browsers just use the regular font (i.e., the font they regard as regular since it was declared that way). In CSS3, this is to be changed so that the behavior of most browsers becomes the norm.
So this is a messy business, and to avoid the mess, use one of these approaches:
a) Declare each font face as a family of its own, as regular and normal-weight, as you have done here, and do not apply font-weight values other than normal' orfont-stylevalues other thannormal` to text in such a font, directly or indirectly (note that many HTML elements produce italic or bold b default).
b) Declare each font face as a font in the family, with font-weight and font-style set in #font-face the logical way, and use the font family the normal way, declaring font-weight: bold when you want bold etc. This is how Google Web Fonts work, when hosted by Google.
P.S. It is odd that the `#font-face' rule does not mention a WOFF format file, which is the preferable format of downloadable fonts when a browser supports it. Generators normally produce it, too, and include it in the rule.