Handwriting Fonts

A short history of handwriting fonts

Compare at a glance

How to use handwriting fonts

How to choose between them

• Caveat if you need annotations and notes. Natural, quick handwriting that stays readable; the most versatile pick.
• Kalam if you need education and kids. Informal handwriting with a pen-on-paper texture.
• Patrick Hand if you need uI accents and stickers. Neat, friendly print handwriting.
• Indie Flower if you need personal blogs. Bubbly, rounded handwriting with a cheerful feel.
• Shadows Into Light if you need captions. Thin, airy handwriting that feels light and casual.
• Gochi Hand if you need callouts and labels. Bold, quick marker handwriting.
• Architects Daughter if you need wireframes and sketches. Neat, architectural print handwriting.

Tested font pairings

Add it to your site

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">

.heading {
  font-family: "Caveat", cursive;
}

Pairing and tips

Each font at a glance

• Caveat is a script or handwriting face best for annotations and notes. Fallback stack: "Caveat", cursive. It pairs well with Inter.
• Kalam is a script or handwriting face best for education and kids. Fallback stack: "Kalam", cursive. Pair it with a neutral sans for body text.
• Patrick Hand is a script or handwriting face best for ui accents and stickers. Fallback stack: "Patrick Hand", cursive. It pairs well with Nunito.
• Indie Flower is a script or handwriting face best for personal blogs. Fallback stack: "Indie Flower", cursive. Pair it with a neutral sans for body text.
• Shadows Into Light is a script or handwriting face best for captions. Fallback stack: "Shadows Into Light", cursive. Pair it with a neutral sans for body text.
• Gochi Hand is a script or handwriting face best for callouts and labels. Fallback stack: "Gochi Hand", cursive. Pair it with a neutral sans for body text.
• Architects Daughter is a script or handwriting face best for wireframes and sketches. Fallback stack: "Architects Daughter", cursive. It pairs well with IBM Plex Sans.

Readability and accessibility

Colors and layouts that suit this style

Common mistakes

• Using handwriting fonts for long paragraphs.
• Mixing several handwriting fonts, which looks messy.
• Setting them too small, where strokes become scratchy.

Recommended sizes

• Script and handwriting faces (Caveat, Kalam, Patrick Hand, Indie Flower, Shadows Into Light, Gochi Hand, Architects Daughter): use at 24px (1.5rem) or larger, and keep to a few words.

Licensing and commercial use

Loading fonts without slowing your site

• Load only the weights and styles you actually use. Each extra weight is another file to download.
• Use font-display: swap (included in the Google Fonts link above) so text shows immediately in a fallback font and swaps when the web font arrives.
• Add preconnect hints for fonts.googleapis.com and fonts.gstatic.com, or self-host the files on your own domain for the fastest, most private loading.
• Prefer variable fonts when available: one file can cover every weight.
• Define a sensible fallback stack, such as "Caveat", cursive, so the layout looks right even before the font loads.

Sources and further reading

• Google Fonts · Every font on this page is available here for free.
• SIL Open Font License FAQ · What the most common Google Fonts license allows.
• Google Fonts FAQ · Licensing and commercial use of Google Fonts.
• MDN: font-family · How font stacks and fallbacks work.

More font guides

Questions people ask