Install FontSwap
Figtree
About Figtree
- 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 →Figtree is a geometric sans-serif designed by Erik Kennedy, optimized for user interfaces and digital products. Its friendly, rounded terminals and open apertures make it particularly readable on screens.
Best Use Cases
Figtree works well for:
- SaaS products: Dashboard typography, onboarding flows
- Mobile apps: Navigation, buttons, form labels
- Marketing sites: Landing pages, feature descriptions
- Startup branding: Modern, approachable identity
Usage Tips
The variable weight axis (300-900) gives full typographic control. Use 400 for body text and 600-700 for headings. Figtree's open letterforms maintain clarity at small sizes, making it a strong choice for dense UI layouts. Pairs well with a serif like Literata for editorial contrast.
Is Figtree on Google Fonts?
Yes, Figtree is available for free on Google Fonts. Get Figtree on Google Fonts ↗
Alternative For (4)
Figtree is a free alternative to the following premium fonts:
Compare Figtree
See how Figtree compares to other fonts side by side.
Variable Font Axes
Figtree is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 900 |
How to Use Figtree
Copy these code snippets to quickly add Figtree to your project.
CSS code for Figtree
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@100..900&display=swap');HTML code for Figtree
<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=Figtree:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Figtree
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'figtree': ['Figtree', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-figtree">Your text here</p>Next.js code for Figtree
// Using next/font (Next.js 13+)
import { Figtree } from 'next/font/google';
const figtree = Figtree({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={figtree.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Figtree'" }}>Your text</p>Expo and React Native code for Figtree
// Install: npx expo install @expo-google-fonts/figtree expo-font
import { useFonts, Figtree_400Regular } from '@expo-google-fonts/figtree';
export default function App() {
const [fontsLoaded] = useFonts({
Figtree_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Figtree_400Regular' }}>
Your text here
</Text>
);
}