Main menu
You are here
the elusive cursive font stack
15 December 2010 - 6:53pm — drew
There are some great articles and resources out there on the interweb about using font stacks in your CSS to ensure your site has the best chance of working well and looking as it's intended to on any combination of browser and operating system / device you can throw at it.
However, a site I worked on recently used the font all designers love to hate: Comic Sans. Almost all of the advice I could find about this font went along the lines of "it's rubbish - don't use it" (that's the polite version, obviously).
Luckily for those of us that absolutely positively have to use comic sans (and for the record, it's actually a really good fit for the site in question), it's very widely available across the main desktop platforms, and can generally be considered web safe. Probably for this reason - and its unpopularity with designery types - it tends not to feature in the most popular '10 great font-stacks'-type articles.
So, when I found out that comic sans is not included on the iPhone (or in iOS in general), I had a bit of a problem. Thankfully, there is a fairly close substitute font on iOS called Marker Felt, and it seems to work okay as a fallback.
[edit] not long after I came up with my font stack Apple added Chalkboard to iOS; I believe it replaced Marker Felt as the default in the Notes app, and it's arguably a better substitute for Comic Sans (see iOS screenshot for comparison). As far as I'm aware Chalkboard is available in iOS 4.2 and later, which should cover most iOS devices. I've now added this to the stack. Note the slightly arcane font name you actually have to use in the CSS.[/edit]
[edit] a helpful commenter has pointed out that in normal OSX, the font is just called Chalkboard. So, you can add this to the font-stack too. Note though that OSX has Comic Sans (where iOS does not), so it's up to you whether you'd prefer OSX users to get Chalkboard or Comic Sans and therefore where you place it in the list of fonts.[/edit]
So without further ado, I present to you my CSS font stack for comic sans, and the cursive font family:
[[css]]
font: 13px/1.5em 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;
[[/css]]
I found the font survey at codestyle.org very interesting and useful in putting this together. I'm pretty confident that between Comic Sans and Chalkboard / Marker Felt most MS and apple platforms are covered.
What about linux and android?
Some sites won't care much about desktop linux, but android is surely on the support wishlist for the majority of new projects now.
The codestyle font survey suggests around 2/3 of unix users have Comic Sans. It is included in the msttcorefonts package but it's not included in stock Ubuntu. Derivative distros such as mint do include it by default I believe. There are of course other linux distros, for which the MS core fonts are also available (you're arguably looking at a small share of a small share...) but again it doesn't look like they're installed by default in SUSE, for example.
The codestyle font survey suggests "URW Chancery L" is the most commonly available cursive font for unix (almost 98% apparently). I can however see two problems with using this font; in my testing on Ubuntu it doesn't seem to work in recent versions of firefox, and I also don't think it looks very much like comic sans (see screenshots).
I don't know much about Purisa; other than the fact that it's installed in stock Ubuntu, and seems to be quite a nice hand-writing type font. Google tells me it's actually a thai font, but works well in English. I put it before URW Chancery L.
Realistically if a lot of the text on your site is supposed to be in comic sans, you'll want to do a good bit of testing with how it would look using one of these fallbacks. I'm not supremely confident that a site all in Purisa or URW Chancery L would be very legible. You may decide you're better off falling back to something simple (or providing an alternative using @font-face perhaps).
It looks like the list of default fonts available on android is very limited, and sadly there's no good substitute for comic sans. You could use some form of browser / agent sniffing conbined with JS and italicise your text in android perhaps.
On the other hand there is support for font-face if you want to supply your own substitute (although beware that one of the common 'bullet proof' font-face approaches doesn't actually work in android, but there is a simple solution).
I have also come across another quirk in android font-face support when experimenting with my cursive font stack. I've tried using a font-face font at the end of the stack (but before the generic family) - the aim obviously being that the android browser will use the font-face font when it fails to find any of the others.
This doesn't seem to work though - I can only get android to use the font-face font if it's at the start of the stack, which is not very useful when it should be the last resort fallback. A quick experiment with firefox suggests that it should work (and it's my understanding of the spec that it should - font-face is just defining another font-family for use elsewhere in the CSS).
I'll keep looking into it, but it seems for now that a font-face fallback for android would only work via browser sniffing and scripting. Which is a shame - hopefully I'll be proved wrong on that.
If you're tempted to supply your own copy of actual comic sans, I'd advise caution on the legal / licensing front, and also that you're careful to avoid the situation where browsers that already have the font available download your version instead. local() is supposed to deal with that situation, but also seems to be a cause of problems in android (as per links given above).
Finally here's a few words of text using my font stack, which can be used for testing on different browser / platform combinations... and a few specific fonts:
- Is Comic Sans available?
- Is Chalkboard (OSX variant) on your system?
- Is Chalkboard (iOS variant) on your system?
- Do you have Marker Felt?
- Do you have Purisa?
- How about URW Chancery L?
- Log in to post comments
Comments
Finally. Thank you.
I'm been trying to figure this issue out with the iPhone for a while, but all my searches turn up are Comc Sans hating articles. Thanks for an actual solution!
Still difficult to fallback cleanly in Android
I had another look at this recently to see whether I had gone wrong in my testing on Android. A quick recap:
There is not a fallback font available in Android which looks anything like Comic Sans (as far as I know there's just Droid Sans, Droid Sans Mono and Droid Serif).
But there is support for @font-face so you can supply your own font. You don't want all the other platforms to use (or even download) this fallback though, as they already have suitable fonts.
I'd think there are two possible approaches to this:
1) define the @font-face font-family for Android, and then put that font-family near the end of the font stack - probably just before the generic cursive fallback.
I'd think that the Android browser would work its way along the font stack, finding it doesn't have any of the fonts available until it reaches the @font-face defined font-family, and it would then use that.
As noted in the article above, this doesn't seem to work - I've tested it in the default Android browser on both 2.2 (Froyo) and 2.3 (Gingerbread). The @font-face font-family only works if it's the first one in the stack.
2) this is a variation on the same theme, but the @font-face rule itself provides local() for when "authors would prefer to use a locally available copy of a given font and download it if it's not".
It's perhaps a slight hack, but I've tried something like this (adapting some CSS generated by Font Squirrel):
[[css]]
@font-face {
font-family: 'Comic';
src: url('SF_Cartoonist_Hand-webfont.eot');
src: local('Comic Sans'), local('Comic Sans MS'), local('ChalkboardSE-Regular'),
url('SF_Cartoonist_Hand-webfont.eot?#iefix') format('embedded-opentype'),
url('SF_Cartoonist_Hand-webfont.woff') format('woff'),
url('SF_Cartoonist_Hand-webfont.ttf') format('truetype'),
url('SF_Cartoonist_Hand-webfont.svg#SFCartoonistHandRegular') format('svg');
font-weight: normal;
font-style: normal;
}
[[/css]]
...so ignoring the first .eot rule which is for the benefit of IE, the idea is pretty much to replicate the font-stack within the @font-face rule. Again, I'd hope that the browser checks if it has 'Comic Sans', if not does it have 'Chalkboard' locally available? Android should find it doesn't have those, and go on to download the appropriate external fonts.
This sadly doesn't seem to work either - desktop browsers broadly do what you'd expect and use the local fonts they have available, but the Android browser seems to barf on the rule, and doesn't use the external font we're trying to feed it.
It seems that there is a known bug in the Android browser which means local() causes the whole @font-face rule to be ignored. Apparently as a result of this the Google Fonts API team sniff for Android and serve different CSS.
I wonder whether it's pretty much the same problem stopping the simpler @font-face at the end of the stack from working too.
Anyway, it seems the conclusion is still that there's no clean way of getting Android to use a fallback @font-face without affecting other platforms which don't need the fallback. It looks like sniffing for Android and giving it something different is the only way at the moment.
chalkboard
In the Mac OS, it's called just "Chalkboard". That should be included in your stack, too. Thanks for identifying how to use the iOS variant in CSS though.
Thank you
Thanks for the comment - I hadn't noticed that. I've added an [edit] block in the main article. Of course, OSX does have Comic Sans - so depending on where you put 'Chalkboard' in the stack, it may not make any noticeable difference.