Install FontSwap
Caveat
About Caveat
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- Variable (100-900)
- Features
- Variable
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Caveat is a handwriting-style font designed by Pablo Impallari, capturing the natural flow of casual cursive writing. Released in 2014, it has become one of the most popular handwritten fonts on Google Fonts, offering an authentic, personal touch to designs.
History and Design
Pablo Impallari created Caveat to provide a free, high-quality handwritten font that feels genuine rather than artificially constructed. The design mimics natural pen strokes with varying baselines and organic letterforms. Unlike many script fonts, Caveat maintains excellent legibility while preserving the warmth and character of actual handwriting.
Why Caveat is Popular
Caveat serves as an excellent free alternative to premium handwritten fonts used in branding, packaging, and personal projects. Its authentic feel and broad character support make it versatile for everything from wedding invitations to casual branding. The Cyrillic support extends its utility to Eastern European markets.
Technical Features
- Variable font: Weight axis from Regular (400) to Bold (700)
- Natural variation: Organic, handwritten character
- Extended character set: Latin and Cyrillic scripts
- Good legibility: Readable despite handwritten style
- Brush companion: Caveat Brush offers a bolder variant
Best Use Cases
Caveat excels in:
- Personal branding: Signatures and personal marks
- Packaging design: Artisanal and handcrafted products
- Wedding stationery: Save-the-dates and informal invitations
- Social media: Casual, approachable graphics
- Children's content: Friendly, accessible appearance
Usage Tips
Use Caveat at larger sizes (18px+) for best legibility. Weight 500-600 offers a good balance of personality and readability. Limit use to headlines, accents, and short text passages rather than body copy. Pairs well with clean sans-serifs like Open Sans or Montserrat to provide contrast. Avoid overusing in formal or corporate contexts.
Is Caveat on Google Fonts?
Yes, Caveat is available for free on Google Fonts. Get Caveat on Google Fonts ↗
Alternative For (4)
Caveat is a free alternative to the following premium fonts:
Compare Caveat
See how Caveat compares to other fonts side by side.
Variable Font Axes
Caveat is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
Font Pairings
Fonts that pair well with Caveat based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Caveat in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Caveat.
@font-face {
font-family: 'Caveat Fallback';
src: local('Arial');
ascent-override: 96%;
descent-override: 30%;
line-gap-override: 0%;
size-adjust: 77.14%;
}How to Use Caveat
Copy these code snippets to quickly add Caveat to your project.
CSS code for Caveat
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@100..900&display=swap');HTML code for Caveat
<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:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Caveat
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'caveat': ['Caveat', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-caveat">Your text here</p>Next.js code for Caveat
// Using next/font (Next.js 13+)
import { Caveat } from 'next/font/google';
const caveat = Caveat({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={caveat.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Caveat'" }}>Your text</p>Expo and React Native code for Caveat
// Install: npx expo install @expo-google-fonts/caveat expo-font
import { useFonts, Caveat_400Regular } from '@expo-google-fonts/caveat';
export default function App() {
const [fontsLoaded] = useFonts({
Caveat_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Caveat_400Regular' }}>
Your text here
</Text>
);
}