Hi Drew, fab article to kick off this year’s 24ways! I didn’t know you could do that with unicode range!

I know that ampersands were just the example not your necessary intention, however I though that was a really good use of it and have implemented better ampersands on Lanyrd now:

An Example, The Art & Science of Javascript

We are using Eigerdals (through Fontdeck) for the heading typeface, which I adore, but I have never been keen on the ampersand, it looked a little too much like a ligature for Et. So using the technique you demonstrated I have switched to Hoefler Text just for the ampersands.

However, I see one big flaw with this: how are you to style the ampersand itself? For example, you may want the ampersand to be italic, it may have a different x-height so needs a different font-size and so on and so forth.

I discovered that the ampersands I wanted to use were all in the italic font and naturally I wanted my titles not to be. So I used the ‘PostScript Name’ of the individual font style I wanted to use rather than the family, and this worked.

Our stack for example is:

src: local(‘HoeflerText-BlackItalic’), local(‘AGaramondPro-BoldItalic’), local(‘MinionPro-BoldIt’), local(‘AdobeHebrew-BoldItalic’);

I deliberately only have fallbacks that looked as I wanted them, because if it cant find one of those it falls back to Eigerdals. For Firefox I gave the @font-face rule the same fallback stack as I had for the title text originally.