Install FontSwap
Outfit
About Outfit
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Outfit is a geometric sans-serif designed by Rodrigo Fuenzalida. Its clean, evenly proportioned letterforms with subtle rounded details create a modern, professional feel suited to tech products and brand identities.
Best Use Cases
Outfit excels in:
- Tech branding: Product names, taglines, marketing copy
- Web applications: UI text, navigation, data displays
- Presentations: Slides, charts, infographics
- Corporate identity: Business cards, letterheads, reports
Usage Tips
With 9 weights from Thin (100) to Black (900), Outfit supports complex typographic hierarchies. Use lighter weights (100-300) at display sizes for elegance, and 400-500 for body text. No italics are available, so rely on weight contrast for emphasis.
Is Outfit on Google Fonts?
Yes, Outfit is available for free on Google Fonts. Get Outfit on Google Fonts ↗
Alternative For (3)
Outfit is a free alternative to the following premium fonts:
Compare Outfit
See how Outfit compares to other fonts side by side.
Variable Font Axes
Outfit is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Outfit
Copy these code snippets to quickly add Outfit to your project.
CSS code for Outfit
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');HTML code for Outfit
<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=Outfit:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Outfit
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'outfit': ['Outfit', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-outfit">Your text here</p>Next.js code for Outfit
// Using next/font (Next.js 13+)
import { Outfit } from 'next/font/google';
const outfit = Outfit({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={outfit.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Outfit'" }}>Your text</p>Expo and React Native code for Outfit
// Install: npx expo install @expo-google-fonts/outfit expo-font
import { useFonts, Outfit_400Regular } from '@expo-google-fonts/outfit';
export default function App() {
const [fontsLoaded] = useFonts({
Outfit_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Outfit_400Regular' }}>
Your text here
</Text>
);
}