Revenge of the Comic Sans!

Just when you thought it was safe to code CSS for your website with web-safe fonts in a proper, well-recommended way. Just when you thought you would never see Comic Sans in any work of your keyboard. Just when you thought the evil font would always be someone else's problem... it's back! And on your own website too!

To preface, I was instructed to use the "same font" as a graphic on our website. I did so, but of course, you can't trust every browser to have "Monotype Corsiva". So, being the good little web developer, I checked "web safe fonts" and did exactly as several websites specified:

'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;

As you might imagine, on every computer and mobile device I had access to, in every browser, this showed up in either Monotype Corsiva, one of the alternatives I specified, or a flat sans-serif font. All good, the way things are supposed to go.

So, after a week of testing by several co-workers, small, unrelated changes, and the final go-ahead, I push the site changes to the live environment. There are, of course, the usual Twitter complaints "it's ugly", "you moved things", "I don't like this color". What shocked me, though, was "They used Comic Sans! Hahaha!"

As you can imagine, I went into panic mode, delving through my code for any mention of the horrendous font, trying to reproduce it on several computers, and finally going into Chrome's developer tools and removing fonts. I took out Monotype Corsiva, then Apple Chancery, and so on, until all that was left was "cursive". Guess what font reared it's notoriously ugly head.

The default font in the stack for "cursive" is Comic Sans!

Now think for a minute all the sites you've laughed at that had Comic Sans where no one in their right mind would put Comic Sans - businesses, government sites, and other places that just made you giggle and wonder what the hell they were thinking. The places you see it are often decorative areas, or in "personal" letters - places you might use a cursive font.

The moral of my cautionary tale is to NEVER use "cursive" in your CSS font-family list. For an unfathomable reason, it is listed as a "cursive" font, and apparently the best option that the standard browsers can think of. The only browser with access to Comic Sans that doesn't default "cursive" to it is Internet Explorer.

If you need to use a cursive/script font, and don't want to force users to install it first:

'Your Fancy Font','Apple Chancery','ITC Zapf Chancery','URW Chancery L',sans-serif;