bowdenweb

Picking up from Font Linking Separate Styles for b and i, I wanted to add examples of using Small Caps fonts with @font-face correctly. I did get it working cross-browser in Firefox 5, Opera 11.5, Chrome 14.0.8, Safari 5.0.5, and ie9, but not without jumping through some hoops first.

To start, I needed to acquire some fonts that have a Small Caps type; I found three at exljbris Font Foundry, which I used for this demo, Delicious, Fontin, and Fontin Sans. Then I simply put each into a demonstration page, declaring the Small Caps font in the @font-face rule and adding the font-variant style, like so:

@font-face{font-family:"Delicious";
  src: url('http://bowdenweb.com/assets/fonts/delicious/webfontkit/delicious-smallcaps-delicious.eot');
  src: url('http://bowdenweb.com/assets/fonts/delicious/webfontkit/delicious-smallcaps-delicious.eot?#iefix') format('embedded-opentype'),
       url('http://bowdenweb.com/assets/fonts/delicious/webfontkit/delicious-smallcaps-delicious.woff') format('woff'), 
       url('http://bowdenweb.com/assets/fonts/delicious/webfontkit/delicious-smallcaps-delicious.ttf') format('truetype'), 
       url('http://bowdenweb.com/assets/fonts/delicious/webfontkit/delicious-smallcaps-delicious.svg#DeliciousSmallCapsRegular') format('svg');
font-weight:400; font-style:normal; font-variant:small-caps}

Initially, I had the fonts declared starting with the Regular version, continuing through any other versions (Bold, Italic, etc.) and ending with the Small Caps font. This failed in Firefox 5 however, all of the fonts would render as Small Caps. After doing a little research, I came across this @font-face Implementation Test, which proved quite useful. The tests recommend placing the font-variant:small-caps rule first because Firefox 3.6 and Opera 10.5 both will overwrite regular text if not. The implementation test is a bit out dated here, Opera 11.5 handles declaring font-variant declarations correctly, and also doesn’t cover ie, but that’s not to take away from it, I did find my solution here.

So for the second test run, I declared font-variant:small-caps first, then declared all the rest of the fonts per family, and lastly declared the Regular font. This proved fruitful cross-browser until I got to ie9, which rendered all the text in Small Caps, just as Firefox had until I flipped the font ordering. So I quickly reversed the changes I had just made and sure enough, they rendered correctly in ie.

Knowing that we can use one method to work in every browser except for ie, and being used similar situations (as all web developers are), my first inclination was conditional comments. I did use them for the final solution, however I did a tad bit more. If you take a gander at the declarations below:

@font-face{font-family:"FontinSansRegular";
  src: url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.eot');
  src: url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.eot?#iefix') format('embedded-opentype'),
  url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.woff') format('woff'), 
  url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.ttf') format('truetype'), 
  url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.svg#FontinSansRegular') format('svg');
font-weight:400; font-style:normal}

The first two lines target ie, while the last 3 cover the rest of the browsers; I didn’t want to serve up ie styles to non-ie browsers nor did I want to serve up any more extra (than already needed) for ie. So here’s what I did: I took out the ie specific declarations and put them into their own stylesheet, with the font-variant:small-caps declared last, then placed that stylesheet in conditional comments. Here’s the new version of the declarations for real browsers:

@font-face{font-family:"FontinSansRegular";
  src: url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-smallcaps-45b-fontin-sans.woff') format('woff'), 
  url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-smallcaps-45b-fontin-sans.ttf') format('truetype'), 
  url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-smallcaps-45b-fontin-sans.svg#FontinSansSmallCaps') format('svg');

And the declarations for ie:

@font-face{font-family:"FontinSansRegular";
  src: url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.eot');
  src: url('http://bowdenweb.com/assets/fonts/fontin-sans/webfontkit/fontin-sans-regular-45b-fontin-sans.eot?#iefix') format('embedded-opentype');

Note: While this does work, I cannot say 100% if this is the best way to go about serving up Small Caps correctly via @font-face. Actually I’m positive that it isn’t, but it is a solution. Until I find more information to shed some light on this situation and browsers provide better support, I am stuck at this point. You can view the demonstrations here: Delicious Font Demo, Fontin Font Demo, and Fontin Sans Font Demo.