Install FontSwap
Vollkorn
About Vollkorn
- 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 →Vollkorn is a robust serif typeface designed by Friedrich Althausen, first released in 2005 and continuously refined since. The name means "wholegrain" in German, reflecting its substantial, nourishing character suited for everyday reading.
History and Design
Friedrich Althausen began designing Vollkorn in 2005 with the goal of creating a free typeface for everyday text use. The design features sturdy serifs, comfortable proportions, and clear letterforms optimized for long-form reading. Regular updates have expanded the family to include small caps, multiple figure styles, and extensive language support.
Why Vollkorn is Popular
Vollkorn has earned its reputation as a reliable workhorse serif, serving as a free alternative to premium text faces like Plantin and Bookmania. Its robust design handles a wide range of uses from books to websites, while comprehensive language support makes it valuable for international projects. The ongoing development by Althausen ensures continued improvements.
Technical Features
- Variable font: Weight axis from Regular (400) to Black (900)
- True italics: Carefully designed cursive forms
- Small caps: Available through OpenType features
- Multiple figure styles: Lining, old-style, tabular, and proportional
- Extensive language support: Latin, Cyrillic, Greek, and Vietnamese
Best Use Cases
Vollkorn excels in:
- Book typography: Reliable for long-form reading
- Academic publishing: Professional appearance for scholarly work
- Newspaper and editorial: Robust enough for dense text
- Web content: Excellent screen readability
- Multilingual projects: Comprehensive character coverage
Usage Tips
For body text, use weight 400 at 16-18px with line height of 1.5-1.6. Enable old-style figures for a more classical appearance. Use weight 600-700 for subheadings and 800-900 for dramatic headlines. The robust design handles smaller sizes well, suitable down to 14px on screen. Pairs well with geometric sans-serifs for a traditional editorial feel.
Is Vollkorn on Google Fonts?
Yes, Vollkorn is available for free on Google Fonts. Get Vollkorn on Google Fonts ↗
Alternative For (2)
Vollkorn is a free alternative to the following premium fonts:
Compare Vollkorn
See how Vollkorn compares to other fonts side by side.
Variable Font Axes
Vollkorn is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 900 |
Font Pairings
Fonts that pair well with Vollkorn based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Vollkorn in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Vollkorn.
@font-face {
font-family: 'Vollkorn Fallback';
src: local('Georgia');
ascent-override: 95.2%;
descent-override: 44.1%;
line-gap-override: 0%;
size-adjust: 95.13%;
}How to Use Vollkorn
Copy these code snippets to quickly add Vollkorn to your project.
CSS code for Vollkorn
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@100..900&display=swap');HTML code for Vollkorn
<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=Vollkorn:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Vollkorn
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'vollkorn': ['Vollkorn', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-vollkorn">Your text here</p>Next.js code for Vollkorn
// Using next/font (Next.js 13+)
import { Vollkorn } from 'next/font/google';
const vollkorn = Vollkorn({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={vollkorn.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Vollkorn'" }}>Your text</p>Expo and React Native code for Vollkorn
// Install: npx expo install @expo-google-fonts/vollkorn expo-font
import { useFonts, Vollkorn_400Regular } from '@expo-google-fonts/vollkorn';
export default function App() {
const [fontsLoaded] = useFonts({
Vollkorn_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Vollkorn_400Regular' }}>
Your text here
</Text>
);
}