Last update 2016/02/28.
I spent a lot of time studying this and fighting it. After I was able to dig up, as far as possible, the main solutions at the moment:
@supports
Use the @supports rule in browsers. This is what I initially decided to make this project. [1] You use the rule as follows:
.some-class { font-variant: small-caps; } @supports(font-feature-settings: 'smcp') { .some-class { font-variant: normal; font-feature-settings: 'smcp'; } }
I simplified by leaving prefix versions; you will need to add -webkit- and -moz- to get this working. Update, 2012/02/28: you no longer need the -moz- prefix, and this will work in Safari in the next version (iOS 9.3 and OS X Safari 9.1).
This has the advantage that the support for real little caps and the support for the @supports rule @supports very similar:
@supports : Can I use functional queries? : Chrome 31+, Firefox 29+, Opera 23+, Android 4.4+, Safari 9+, Edge 12+, Chrome for Android.
Update, 2016/02/28: since the above diagram will be clear, all evergreen browsers now have @supports support.
font-feature-settings : Using small caps and text drawings on the Internet : Chrome, Firefox, IE10 +
This is not ideal: since IE10 / 11 does not implement @supports , you are missing one browser. ( Edit, 2015/09/31: IE itself does not have @supports , but Edge 12+ does, and this should more and more cover all users of the site.) However, this gives you most of the way, and it should be in future: this should gradually improve the site. Normal (poor, but functional) Meanwhile, small caps are displayed, and when browsers end up getting around using the default OpenType small closures for font-variant: small-caps , this will work just fine. This is a "progressive improvement" and it will work well for most purposes. [2]
Subset of fonts
As already mentioned in the question, you can create a subset of the font, includes only small capitals. This is what I did for little caps on my own site ; see the first line of the first in this post for an example.
To remove this, you need to start with a subset of the font. You can do this manually using the font tool, or (in a simpler way) you can use FontSquirrel's custom subset tool in the webfont generator . ( Note:. Must verify the license and confirm that the type of modification is being considered. See below.) In the web font generator, first upload the file you want to modify. Then select the Expert radio button. Most of the settings you can leave as they are; they are good normal defaults. Halfway down the page, you'll see OpenType Flattening options . Here, select only "Small caps." Run the generator. The result will be a complete replacement for normal lowercase letters with small caps. [3]
In this case, you can simply apply the style to elements that you want to have small capitals, for example:
.divine-name { font-family: 'my_typeface_smcp', 'my_typeface', serif; }
The main advantage of this approach is consistency: this font will be displayed in every browser, back to IE5.5, as long as you deliver it correctly using the various hooks required by @font-face .
There are several drawbacks to this approach:
This means delivering another font file. In my case, it will be (since I really only need four characters), but there is something else to consider as a whole. In any case, this is another HTTP request, which will slow down the page loading even more, or at least give you a little flash of uneven text when you reload.
It may violate the licenses of the respective fonts. At least one of the fonts that I use in this project is: the license explicitly prohibits rebuilding the font with tools such as FontSquirrel. (FontSquirrel was the tool I've used for this approach before, and it works pretty well.) It's a matter of creating or breaking to use a subset of the font to fulfill the purpose. In this case, if you have every reason for this, you may be able to get support from the supplier (especially if it is a small store). For the project that raised this question, I was able to do it with a nice email - the designer is a great guy.
Another important reason why this is not done is that it has significantly higher operating costs. If at any time you need to change or update the font, you must go through the subset process again and again. By contrast, the first option will just work, although admittedly, it’s not as pleasant as one might hope, and will not only continue to work, but will actually improve over time, as browsers increase the implementation of the CSS3 standard.
Notes
For various reasons (especially see Note 2 below), I actually chose the second approach described here, which is the same approach I was trying to avoid. Alas.
Problems remain: even in the latest Chrome (38 at the time point edit), using the font-feature-settings: 'smcp' approach, has some questions. For example, if you enable letter-spacing (a fairly common recommendation for small caps), the small caps will revert to regular lowercase letters. Fixed in Chrome 48 . HT for the responder below .
From the FontSquirrel blog post in which the function was introduced:
If you have a font with OpenType features, now you can smooth some of them into your webfont. For example, some fonts have small caps, but they are completely inaccessible in a web browser. By choosing the Small Cap option, the generator will replace all lowercase glyphs with small cap options, giving you a small font. Please note that not all OpenType functions are supported, and if the font does not have OpenType functions, using these parameters will not create them.