When @font-face CSS font replacement became supported by enough major browsers to get designers off the “web safe” font treadmill, most of us took a quiet moment to cry a small tear of relief. We knew it would have challenges, we knew that Internet Explorer would demand we did something extra and finicky to cushion its fragile ego. But at long last we were no longer caught between SEO demands that text be indexable, and user desires for a beautiful site. And for the most part, it has been worth the effort.
We may have the occasional hiccup, and we’ve learned to be wary of things like the variability of font weights and the occasional difficulty of getting a complete set of files in order to ensure an <em> or a <strong> (or, heaven forfend, something which has both) will actually display the way intended. But recently I encountered the single weirdest @font-face bug yet.
We’d built the site according to the original design mockup, and it was beautiful and had fantastic usability for a target audience which was not known to be particularly tech-savvy. We were nearly ready to launch, and I was (forgivably?) proud. Final details were being tidied up in preparation when…we were informed that the address for the client was wrong on the website. They were located at 239 Madeup St., not 236. Simple enough, one five second fix and…huh. It’s not fixing it. Looks right on the back end, still not the right numbers on the front end…what the hell is going on? These are the moments where you are quite sure you have finally made it into the Twilight Zone.
After twenty maddening minutes, during which I verified that it was specifically a problem with Legendum and the @font-face replacement, reconverted and reinstalled the font no less than three times, beat my head against the edge of my desk until it dented, and cried little salty tears of designer fury, I still had not managed to get “9” to appear on the page. So I ran with a different font and slunk away defeated.
It turns out that Legendum, when converted for @font-face and viewed on a Mac, doesn’t flip the single character it uses for both “6” and “9”.
That’s what you need to know, and I’m telling you so that you won’t suffer as I have suffered. You can run it through a font editor and flip it yourself, if you have your heart really set on Legendum. But otherwise it’s never going to work. On a Mac. For once, your Windows users will be just fine.