I'm trying to use small-caps in a document, but font-variant: small-caps gives me faked small-caps, i.e., scaled-down capitals. I tried defining the small-caps variant with @font-face, but that still does not work.
Created attachment 29190 [details] Test case
Created attachment 32445 [details] Font fallback from Fontin to Georgia, compared to Fontin Small Caps Not only does Webkit ignore the font-variant specified in an @font-face declaration, it also falls back to a local font (Georgia Serif in this case, to contrast nicely with Fontin Sans) instead of the regular version in the @font-face declaration.
Created attachment 32447 [details] Test case to go along with image (uses Fontin Serif instead of Sans however)
It looks like just <a href='http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/'>including font-variant in @font-face</a> makes Webkit ignore the whole thing. Confirmed in Chrome 4.0.249.4 and Safari 4.0.3.
See https://bugs.webkit.org/show_bug.cgi?id=49505 for the @font-face issue.
Issue is still present in Safari 10. Both font-variant-caps and font-feature-settings should select proper small caps if they are available through OpenType. Safari 10 renders real small caps when using font-feature-settings but synthesises the small caps when using font-variant-caps even if the real small caps are available. A new test case: http://codepen.io/clagnut/pen/Vmpobj?editors=1100
Ah sorry just realised this issue is for font-variant NOT font-variant-caps. For font-variant, the small caps *should* by synthesised. Will create a new issue accordingly.
In all test cases (two attached) and one from CodePen (Comment 06) - all browsers are matching each other (at least in rendering). Tested using: Safari Technology Preview 180, Chrome Canary 120 and Firefox Nightly 120.