Install FontSwap
Exo
About Exo
- Source
- Google Fonts ↗
- Classification
- sans-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 →Exo is a geometric sans-serif typeface designed by Natanael Gama and released through Google Fonts. Originally launched in 2012 and extensively revised as Exo 2 in 2014, the typeface offers a contemporary take on industrial geometric design with excellent versatility for both display and text applications.
History and Design
Natanael Gama designed Exo as a futuristic geometric sans-serif that combines technological precision with contemporary aesthetics. The Exo 2 revision refined the original design with improved letterforms, enhanced spacing, and added a complete italic family. The design features consistent stroke widths, geometric foundations, and subtle refinements for text readability.
Why Exo is Popular
Exo's industrial aesthetic makes it popular for technology, gaming, and automotive projects where a technical, futuristic feel is desired. The extensive weight range and variable font support provide flexibility for complex typographic hierarchies. Its free availability under the Open Font License makes it accessible for projects of all scales.
Technical Features
- Variable font: Continuous weight axis from Thin (100) to Black (900)
- Complete italic family: All weights include true italics
- Wide language support: Latin, Cyrillic, and Vietnamese character sets
- OpenType features: Tabular figures, stylistic alternates, and more
Best Use Cases
Exo excels in:
- Technology branding: Futuristic aesthetic for tech companies
- Gaming: Modern feel for game interfaces and marketing
- Automotive: Industrial precision for vehicle-related design
- Signage: Clear letterforms for wayfinding systems
Usage Tips
For body text, use weights 400-500 for optimal readability. For headlines and display, weights 600-900 create strong visual impact. Exo pairs well with neutral body fonts like Roboto or Open Sans for contrast between display and text applications.
Is Exo on Google Fonts?
Yes, Exo is available for free on Google Fonts. Get Exo on Google Fonts ↗
Alternative For (4)
Exo is a free alternative to the following premium fonts:
Shares industrial geometric character with similar technical aesthetic
Similar futuristic geometric style with tech aesthetic
Compare Exo
See how Exo compares to other fonts side by side.
Variable Font Axes
Exo 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 Exo based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Exo in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Exo.
@font-face {
font-family: 'Exo Fallback';
src: local('Arial');
ascent-override: 100.2%;
descent-override: 32.7%;
line-gap-override: 0%;
size-adjust: 102.4%;
}How to Use Exo
Copy these code snippets to quickly add Exo to your project.
CSS code for Exo
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@100..900&display=swap');HTML code for Exo
<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=Exo:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Exo
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'exo': ['Exo', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-exo">Your text here</p>Next.js code for Exo
// Using next/font (Next.js 13+)
import { Exo } from 'next/font/google';
const exo = Exo({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={exo.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Exo'" }}>Your text</p>Expo and React Native code for Exo
// Install: npx expo install @expo-google-fonts/exo expo-font
import { useFonts, Exo_400Regular } from '@expo-google-fonts/exo';
export default function App() {
const [fontsLoaded] = useFonts({
Exo_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Exo_400Regular' }}>
Your text here
</Text>
);
}