Install FontSwap
Alegreya
About Alegreya
- 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 →Alegreya is a serif typeface designed by Juan Pablo del Peral for Huerta Tipográfica, an Argentine type foundry. Originally designed for literature, Alegreya features a calligraphic quality with dynamic rhythm that produces a pleasant reading experience across extended text.
Design and Character
Alegreya draws from calligraphic traditions, with letterforms that show visible pen influence through their stroke modulation and organic curves. The typeface balances classical serif proportions with contemporary readability, making it suitable for both print and screen typography.
Best For
- Book and literary publishing
- Editorial and magazine typography
- Cultural institution communications
- Long-form reading experiences
- Latin American and Spanish language publications
Technical Features
- Variable font: Continuous weight axis from Regular to Black
- Small caps: Available in all weights
- Multiple figure styles: Lining, oldstyle, tabular, and proportional
- Extensive language support: Latin, Cyrillic, Greek, and Vietnamese
- Companion families: Alegreya Sans and Alegreya SC (Small Caps)
Usage Tips
Pair with clean sans-serifs like Inter or Source Sans 3 for contemporary editorial contrast. Use weights 400-500 for body text and 700+ for headlines. Enable OpenType features for professional typographic detail.
Is Alegreya on Google Fonts?
Yes, Alegreya is available for free on Google Fonts. Get Alegreya on Google Fonts ↗
Alternative For (2)
Alegreya is a free alternative to the following premium fonts:
Calligraphic serif family with small caps, variable support, and dynamic character
Calligraphic serif family with small caps, variable support, and dynamic character
Compare Alegreya
See how Alegreya compares to other fonts side by side.
Variable Font Axes
Alegreya 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 Alegreya based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Alegreya in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Alegreya.
@font-face {
font-family: 'Alegreya Fallback';
src: local('Georgia');
ascent-override: 101.6%;
descent-override: 34.5%;
line-gap-override: 0%;
size-adjust: 93.88%;
}How to Use Alegreya
Copy these code snippets to quickly add Alegreya to your project.
CSS code for Alegreya
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@100..900&display=swap');HTML code for Alegreya
<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=Alegreya:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Alegreya
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'alegreya': ['Alegreya', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-alegreya">Your text here</p>Next.js code for Alegreya
// Using next/font (Next.js 13+)
import { Alegreya } from 'next/font/google';
const alegreya = Alegreya({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={alegreya.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Alegreya'" }}>Your text</p>Expo and React Native code for Alegreya
// Install: npx expo install @expo-google-fonts/alegreya expo-font
import { useFonts, Alegreya_400Regular } from '@expo-google-fonts/alegreya';
export default function App() {
const [fontsLoaded] = useFonts({
Alegreya_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Alegreya_400Regular' }}>
Your text here
</Text>
);
}