@font-face and font-variant bad idea?

Question

if i use @font-face font and font-variant: small-caps for the same selector the font will fallback to the next system default font in safari. how do i get around that?

Answer 1

Well i think its just a bug :( i now use :first-letter pseudo selector to achieve that

Answer 2

I had some trouble creating an example to replicate your issue at first, which made me realize that font-face is not a standard CSS2 attribute; the equivalent is font-family. So I did some quick research on @font-face, and found that it's -- depending on how you look at it -- either a non-standard attribute specific to Firefox 3.5 or a part of the not-yet-mainstream CSS3. Safari has partial support for CSS3, depending on version, but I suspect that this is the cause of your undesired behavior.

Answer 3

This was a WebKit bug. It’s been fixed, and Safari should be fine the next time it’s updated. The current version of Chrome is using a newer version of WebKit where the bug has been fixed. Here’s a good way to detect it (from SafariSmallCapsWebFontFix):

if ((navigator.userAgent.match(/WebKit\/([^.]+)/) || [] )[1] < 534) {
    // Broken, work around it!
}

You could use that JavaScript to, say, add a class to the html node and change how you style the page.