Install FontSwap
Libre Bodoni
About Libre Bodoni
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- Variable (100-900)
- Features
- Variable, 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 →Libre Bodoni is an open-source revival of the classic Bodoni typeface, created by Impallari Type. It faithfully captures the dramatic contrast and elegant proportions of Giambattista Bodoni's 18th-century designs while providing modern digital functionality.
History and Design
Pablo Impallari designed Libre Bodoni as part of the Libre font family project, which aims to create high-quality open-source alternatives to classic typefaces. The design closely follows Bodoni's characteristic high contrast, flat serifs, and vertical stress that define the Modern or Didone classification.
The typeface maintains Bodoni's dramatic personality—the extreme difference between thick and thin strokes creates immediate visual impact. Impallari balanced historical accuracy with practical considerations for digital reproduction.
Why Libre Bodoni Matters
Libre Bodoni democratizes access to the Bodoni aesthetic. Fashion magazines, luxury brands, and editorial designers can achieve Bodoni's sophisticated look without licensing fees. The faithful reproduction ensures professional results comparable to commercial alternatives.
Technical Features
- Variable font: Adjustable weight from regular to bold
- True italics: Elegantly designed oblique variants
- OpenType features: Ligatures, stylistic alternates
- Latin Extended: Comprehensive character support
- Display optimized: Maintains detail at large sizes
Best Use Cases
Libre Bodoni excels in:
- Fashion design: Editorial layouts and brand materials
- Display typography: Headlines with dramatic impact
- Luxury branding: Sophisticated visual identities
- Poster design: High-contrast statements at large scale
Usage Tips
Use Libre Bodoni at display sizes (18pt+) where the hairline details remain visible. Avoid small body text where the thin strokes may disappear. Pair with geometric sans-serifs like Montserrat for classic contrast. The variable font allows fine-tuning weight to match specific applications. Ensure sufficient line height to accommodate the tall x-height.
Is Libre Bodoni on Google Fonts?
Yes, Libre Bodoni is available for free on Google Fonts. Get Libre Bodoni on Google Fonts ↗
Alternative For (16)
Libre Bodoni is a free alternative to the following premium fonts:
Compare Libre Bodoni
See how Libre Bodoni compares to other fonts side by side.
Variable Font Axes
Libre Bodoni 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 Libre Bodoni based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Libre Bodoni in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Libre Bodoni.
@font-face {
font-family: 'Libre Bodoni Fallback';
src: local('Georgia');
ascent-override: 92.4%;
descent-override: 32.6%;
line-gap-override: 0%;
size-adjust: 93.47%;
}How to Use Libre Bodoni
Copy these code snippets to quickly add Libre Bodoni to your project.
CSS code for Libre Bodoni
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@100..900&display=swap');HTML code for Libre Bodoni
<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=Libre+Bodoni:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Libre Bodoni
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'libre-bodoni': ['"Libre Bodoni"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-libre-bodoni">Your text here</p>Next.js code for Libre Bodoni
// Using next/font (Next.js 13+)
import { Libre_Bodoni } from 'next/font/google';
const libre_bodoni = Libre_Bodoni({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={libre_bodoni.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Libre Bodoni"' }}>Your text</p>Expo and React Native code for Libre Bodoni
// Install: npx expo install @expo-google-fonts/libre-bodoni expo-font
import { useFonts, Libre_Bodoni_400Regular } from '@expo-google-fonts/libre-bodoni';
export default function App() {
const [fontsLoaded] = useFonts({
Libre_Bodoni_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Libre_Bodoni_400Regular' }}>
Your text here
</Text>
);
}