Install FontSwap
Calistoga
About Calistoga
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
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 →Calistoga is a cheerful display serif designed by Yvonne Schuttler and Eben Sorkin at Sorkin Type. Inspired by early 20th-century Santa Fe Railroad poster lettering by Oscar M. Bryn, it combines bold, space-efficient letterforms with a warm vintage personality.
History and Design
Calistoga draws its character from American advertising lettering of the early 1900s. The design features sturdy, high-contrast strokes with soft, rounded terminals that give it a friendly, approachable quality. Its compact proportions make it efficient for headlines while maintaining strong visual presence.
Best Use Cases
Calistoga excels in:
- Food and beverage: Restaurant branding, craft labels, menu headers
- Retail signage: Shop fronts, packaging, promotional materials
- Event branding: Festival posters, invitations, seasonal campaigns
- Editorial display: Magazine headlines, pull quotes, section titles
Usage Tips
Use Calistoga at display sizes (24px+) where its warm, vintage character can shine. It pairs well with clean sans-serifs like Open Sans or Lato for body text. The single weight keeps things simple — rely on size contrast rather than weight variation for hierarchy.
Is Calistoga on Google Fonts?
Yes, Calistoga is available for free on Google Fonts. Get Calistoga on Google Fonts ↗
Compare Calistoga
See how Calistoga compares to other fonts side by side.
Font Pairings
Fonts that pair well with Calistoga based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Calistoga in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Calistoga.
@font-face {
font-family: 'Calistoga Fallback';
src: local('Arial');
ascent-override: 100%;
descent-override: 30%;
line-gap-override: 0%;
size-adjust: 102.21%;
}How to Use Calistoga
Copy these code snippets to quickly add Calistoga to your project.
CSS code for Calistoga
@import url('https://fonts.googleapis.com/css2?family=Calistoga:wght@400&display=swap');HTML code for Calistoga
<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=Calistoga:wght@400&display=swap" rel="stylesheet">Tailwind code for Calistoga
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'calistoga': ['Calistoga', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-calistoga">Your text here</p>Next.js code for Calistoga
// Using next/font (Next.js 13+)
import { Calistoga } from 'next/font/google';
const calistoga = Calistoga({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={calistoga.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Calistoga'" }}>Your text</p>Expo and React Native code for Calistoga
// Install: npx expo install @expo-google-fonts/calistoga expo-font
import { useFonts, Calistoga_400Regular } from '@expo-google-fonts/calistoga';
export default function App() {
const [fontsLoaded] = useFonts({
Calistoga_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Calistoga_400Regular' }}>
Your text here
</Text>
);
}