Calligraffitti
About Calligraffitti
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
Free to use, modify, and distribute. Permits commercial use with attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Calligraffitti is a handwriting-style font by Dathan Boardman that blends calligraphic strokes with graffiti-inspired energy. Available on Google Fonts since 2011, it captures the spontaneous quality of marker-on-paper writing with just enough polish to remain legible.
History and Design
Created by Dathan Boardman for Open Window, Calligraffitti was one of the early handwriting fonts added to the Google Fonts library when it launched in 2011. At a time when the platform was still building its catalog, Calligraffitti helped establish that free web fonts could carry genuine personality rather than just filling a functional gap. The name is a portmanteau of "calligraphy" and "graffiti," and the design lives up to both — flowing letterforms with the casual irregularity of street-style writing. The single weight provides a natural, unforced appearance.
Why Calligraffitti Works
Calligraffitti occupies a sweet spot between structured calligraphy and freeform handwriting that few other free fonts achieve. Where Caveat aims for everyday note-taking legibility and Dancing Script channels 1950s bounce, Calligraffitti leans into expressive energy. The strokes feel faster, more impulsive, as if written with a broad-tipped marker in a single confident pass. This gives it an authenticity that more polished script fonts lack — the kind of raw creative voice that resonates with music, arts, and youth-oriented brands. Compared to Caveat, which is the safer choice for extended handwritten text, Calligraffitti trades versatility for character. It is the font you reach for when the design needs to feel urgent, personal, and unapologetically handmade.
Technical Features
- Single weight: Regular (400) only — no variable or bold variants
- Latin character set: Basic Latin support
- Apache 2.0 license: Free for commercial use and modification
- Lightweight: Small file size, fast loading
Best Use Cases
Calligraffitti works well for:
- Creative branding: Artisanal, handmade, and craft-oriented brands
- Social media graphics: Casual, approachable text overlays
- Invitations and cards: Informal events and personal stationery
- Children's content: Friendly, hand-drawn aesthetic
- Accent text: Pull quotes, annotations, and editorial callouts
Usage Tips
Use Calligraffitti at 20px+ for best legibility. Reserve for headlines, accents, and short text — not body copy. The single weight limits hierarchy options, so pair with a multi-weight sans-serif like Open Sans or Montserrat for structure. Avoid all-caps usage where the handwritten character is lost.
Is Calligraffitti on Google Fonts?
Yes, Calligraffitti is available for free on Google Fonts. Get Calligraffitti on Google Fonts ↗
Alternative For (8)
Calligraffitti is a free alternative to the following premium fonts:
Free handwriting font blending calligraphy and graffiti energy
Free handwriting font blending calligraphy and graffiti energy
Free handwriting font blending calligraphy and graffiti energy
Free handwriting font blending calligraphy and graffiti energy
Free handwriting font blending calligraphy with graffiti energy
Free handwriting font blending calligraphy with graffiti energy
Free handwriting font blending calligraphy with graffiti energy
Compare Calligraffitti
See how Calligraffitti compares to other fonts side by side.
How to Use Calligraffitti
Copy these code snippets to quickly add Calligraffitti to your project.
CSS code for Calligraffitti
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti:wght@400&display=swap'); HTML code for Calligraffitti
<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=Calligraffitti:wght@400&display=swap" rel="stylesheet"> Tailwind code for Calligraffitti
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'calligraffitti': ['Calligraffitti', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-calligraffitti">Your text here</p> Next.js code for Calligraffitti
// Using next/font (Next.js 13+)
import { Calligraffitti } from 'next/font/google';
const calligraffitti = Calligraffitti({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={calligraffitti.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Calligraffitti'" }}>Your text</p> Expo and React Native code for Calligraffitti
// Install: npx expo install @expo-google-fonts/calligraffitti expo-font
import { useFonts, Calligraffitti_400Regular } from '@expo-google-fonts/calligraffitti';
export default function App() {
const [fontsLoaded] = useFonts({
Calligraffitti_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Calligraffitti_400Regular' }}>
Your text here
</Text>
);
}