Install FontSwap
Cormorant Garamond
About Cormorant Garamond
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 300, 400, 500, 600, 700
- Features
- Italics
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 →Cormorant Garamond is a display typeface designed by Christian Thalmann that draws inspiration from Claude Garamont's 16th-century designs while adding contemporary flair. With higher contrast and more dramatic proportions than traditional Garamond revivals, it excels in headlines and large-format applications.
History and Design
Christian Thalmann designed Cormorant as a project on Kickstarter, describing it as "a display type family in the Garamond tradition." Rather than creating a faithful historical revival, Thalmann interpreted the Garamond aesthetic with increased contrast and refined details suited to modern display use.
The Cormorant family includes several variants: Garamond, Infant (with simpler letterforms), Upright (italicized forms as the regular style), and SC (small caps). This flexibility makes it adaptable to diverse design needs.
Why Cormorant Garamond Excels
Cormorant Garamond's higher contrast creates visual drama that works beautifully at large sizes. The refined details and elegant proportions convey sophistication while maintaining readability. It bridges the gap between classical Garamond and contemporary display typography.
Technical Features
- Five weights: Light through bold with matching italics
- Multiple family variants: Garamond, Infant, Upright, SC
- Extensive character set: Latin Extended, Cyrillic, Vietnamese
- OpenType features: Ligatures, stylistic alternates, small caps
- Display optimized: High contrast for headlines and large text
Best Use Cases
Cormorant Garamond excels in:
- Display typography: Headlines, titles, and pull quotes
- Editorial design: Magazine features and article headers
- Branding: Elegant logotypes and visual identities
- Wedding and event stationery: Romantic, refined aesthetic
Usage Tips
Reserve Cormorant Garamond for display sizes (18pt and above) where its high contrast shines. For body text, pair it with EB Garamond or another text-optimized serif. The light weight creates especially striking headlines. Use the Infant variant for a slightly softer, more approachable feel in children's content or friendly branding.
Is Cormorant Garamond on Google Fonts?
Yes, Cormorant Garamond is available for free on Google Fonts. Get Cormorant Garamond on Google Fonts ↗
Alternative For (27)
Cormorant Garamond is a free alternative to the following premium fonts:
Higher-contrast Garamond interpretation optimized for display sizes. Shares Aldine's old-style proportions and calligraphic warmth but adds more dramatic thick-thin transitions that shine in headlines and pull quotes
High-contrast display Garamond with dramatic presence and variable support
Elegant display Garamond with refined contrast and warm classical character
High-contrast display serif with classical elegance and broad weight range
High-contrast display Garamond with dramatic presence and variable support
High-contrast display Garamond with elegant proportions and editorial refinement
More decorative interpretation with higher contrast for display use
High-contrast display Garamond with dramatic presence and variable support
High-contrast display Garamond with elegant proportions and editorial presence
High-contrast display serif with refined proportions and classical elegance
High-contrast display Garamond with elegant proportions and luxury character
Display-oriented Garamond with comparable elegance at larger sizes
Display-oriented Garamond interpretation with comparable elegance
Display-focused Garamond with similar elegance and old-style character
Compare Cormorant Garamond
See how Cormorant Garamond compares to other fonts side by side.
Font Pairings
Fonts that pair well with Cormorant Garamond based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Cormorant Garamond in production.
- Score
- 45 /100 Average
- File Size
- 324.7 KB Heavy
- Weights
- 5 static + Italics
- Languages
- 5 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.386
- Cap Height Ratio
- 0.625
- Ascender
- 924
- Descender
- -287
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Cormorant Garamond.
@font-face {
font-family: 'Cormorant Garamond Fallback';
src: local('Georgia');
ascent-override: 92.4%;
descent-override: 28.7%;
line-gap-override: 0%;
size-adjust: 80.18%;
}How to Use Cormorant Garamond
Copy these code snippets to quickly add Cormorant Garamond to your project.
CSS code for Cormorant Garamond
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');HTML code for Cormorant Garamond
<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=Cormorant+Garamond:wght@300;400;500;600;700&display=swap" rel="stylesheet">Tailwind code for Cormorant Garamond
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'cormorant-garamond': ['"Cormorant Garamond"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-cormorant-garamond">Your text here</p>Next.js code for Cormorant Garamond
// Using next/font (Next.js 13+)
import { Cormorant_Garamond } from 'next/font/google';
const cormorant_garamond = Cormorant_Garamond({
subsets: ['latin'],
weight: ['300', '400', '500', '600', '700'],
});
export default function Component() {
return (
<p className={cormorant_garamond.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Cormorant Garamond"' }}>Your text</p>Expo and React Native code for Cormorant Garamond
// Install: npx expo install @expo-google-fonts/cormorant-garamond expo-font
import { useFonts, Cormorant_Garamond_400Regular } from '@expo-google-fonts/cormorant-garamond';
export default function App() {
const [fontsLoaded] = useFonts({
Cormorant_Garamond_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Cormorant_Garamond_400Regular' }}>
Your text here
</Text>
);
}