Setting CSS font-family to a safe handwriting font

Question

In CSS, I usually go with the usual

font-family: Arial, Helvetica, sans-serif;

For a little change, I'm going for a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like handwriting?

Nth

Answer 1

Similar to sans-serif there is a generic cursive that it a "font that resembles handwriting". This will vary by browser (as will sans-serif) but could be a good place to start.

Here is a survey of script family fonts installed per user (year 2012):

Cursive font sampler and survey results

They all look significantly different from each other so you'd lose some consistency, but some are quite widely adopted.

Their main installed fonts are (FOR WINDOWS ONLY):

Comic Sans MS       99.13%  
Monotype Corsiva    82.29%  
Bradley Hand ITC    63.02% 
Tempus Sans ITC     62.68% 
French Script MT    62.39%

Chet

That will likely end up either Comic Sans, or a cursive but not truly handwriting-style font. – Moluccas

Dead link. Via wayback machine: web.archive.org/web/2013*/codestyle.org/css/font-family/sampler-Cursive.shtml – Bitner

Answer 2

You could use one of the Google web safe fonts: http://www.google.com/webfonts/family?family=Schoolbell&subset=latin#code

<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">

h1 {
    font-family: 'Schoolbell', arial, serif; 
}

Attrition

This is including a font with a page, not using a web-safe font. Important distinction. – Cite

This elegantly solves the OP's problem and provides a more robust solution than worrying about the client environment. – Humoresque

Answer 3

There is no handwriting font that would be reliably available in most browsers across all platforms. There are subsets like the fonts that come with Windows Vista or 7 but if you want to achieve any serious reliable coverage, it's likely that you'll have to resort to delivering the font alongside the web page - which, sadly, makes things complicated.

Related SO questions:

• How to add some non standard font to website?

• How to use our custom font on our website

• Fonts on the Web

Blessington

Not true, Comic Sans although a dubious choice is reliably available. – Moluccas

@fig I personally wouldn't regard Comic Sans as a true handwriting font, even though it sort of is... The OP will have to decide whether it's handwriting-y enough. – Blessington

fair enough, but most would consider it one and even if not, it's the closest thing to one that's installed in most browsers. – Moluccas

Answer 4

The only web-safe handwriting font is Comic Sans - if you want to inflict that on your users. ;)

For percentages, see the results of the Code Style survey as of this month:

Windows  99.13%
Mac      89.94%
Linux    60.95%

The most common cursive one on Linux is URW Chancery L, but it's not cross-platform.

Moluccas

Answer 5

I suppose Comic Sans or Lucida handwriting would be some of the most widely available 'handwriting' fonts, although they're not great fonts. You might be better served by looking into some of the font embeding options, either using fancy-smancy html 5 stuff: http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ which won't be entirely supported, or using sIFR which is flash based: http://www.mikeindustries.com/blog/sifr, or some combination of these solutions to reach all users.

Lifelike

Answer 6

Comic Sans would be the most handwritingesque font common to macs and pcs, that being said you could always embed a font in your page.

Planck

Answer 7

Read This: http://www.w3.org/Style/Examples/007/fonts

and for a non js way: http://css-tricks.com/css-image-replacement/

Quirites

Answer 8

There's an alternative. If you're familiar with Javscript or Jquery. There's a very nice script called "Cufon" that does a thing called "Font Replacement". With this simple to use script, you can use ANY font you want on your website. I suggest you start by checking it's documentation, then create the cufon-js version of the font and then use it !

With code like this, you would be already doing font replacement ...check this simplicity

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="cufon-yui.js" type="text/javascript"></script>
        <script src="Vegur_300.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1');
        </script>
    </head>
    <body>
        <h1>This text will be shown in Vegur.</h1>
    </body>
</html>

Please visit this website for more information: http://cufon.shoqolate.com/generate/ (this is were you can generate your favorite font and make it ready to be used as a replacement on your site). Remember to include the jquery file!

Chant