Install FontSwap
Aleo
About Aleo
- 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 →Aleo is a contemporary slab serif typeface designed by Alessio Laiso. Released in 2013, it was created as a companion to the popular Lato sans-serif, sharing similar proportions and design philosophy while offering a distinct slab serif interpretation.
Design Characteristics
Aleo features rounded terminals and semi-organic curves that give it a friendly, approachable personality uncommon in slab serifs. The typeface balances geometric structure with subtle humanist touches, making it suitable for both display and text applications.
Technical Features
- Variable font: Full weight axis from Thin (100) to Black (900)
- Comprehensive weights: Nine weights for maximum flexibility
- Italic styles: True italics for each weight
- OpenType features: Standard ligatures and contextual alternates
Best Use Cases
Aleo excels in:
- Editorial design: Friendly alternative to traditional slab serifs
- Branding: Approachable yet professional identity work
- Web content: Excellent readability at various sizes
- Pairing with Lato: Designed as a natural companion typeface
Is Aleo on Google Fonts?
Yes, Aleo is available for free on Google Fonts. Get Aleo on Google Fonts ↗
Alternative For (1)
Aleo is a free alternative to the following premium fonts:
Compare Aleo
See how Aleo compares to other fonts side by side.
Variable Font Axes
Aleo is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Aleo based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Aleo in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Aleo.
@font-face {
font-family: 'Aleo Fallback';
src: local('Georgia');
ascent-override: 90.5%;
descent-override: 29.5%;
line-gap-override: 0%;
size-adjust: 105.31%;
}How to Use Aleo
Copy these code snippets to quickly add Aleo to your project.
CSS code for Aleo
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@100..900&display=swap');HTML code for Aleo
<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=Aleo:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Aleo
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'aleo': ['Aleo', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-aleo">Your text here</p>Next.js code for Aleo
// Using next/font (Next.js 13+)
import { Aleo } from 'next/font/google';
const aleo = Aleo({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={aleo.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Aleo'" }}>Your text</p>Expo and React Native code for Aleo
// Install: npx expo install @expo-google-fonts/aleo expo-font
import { useFonts, Aleo_400Regular } from '@expo-google-fonts/aleo';
export default function App() {
const [fontsLoaded] = useFonts({
Aleo_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Aleo_400Regular' }}>
Your text here
</Text>
);
}