Install FontSwap
Manrope
About Manrope
- 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 →Manrope is a semi-rounded sans-serif designed by Mikhail Sharanda. It blends geometric structure with humanist warmth, resulting in a versatile typeface that reads well across UI, editorial, and branding contexts.
Best Use Cases
Manrope fits well in:
- SaaS dashboards: Clean data-heavy interfaces
- Editorial design: Article text, blog typography
- Corporate branding: Professional yet approachable identity
- Documentation: Technical writing, knowledge bases
Usage Tips
Manrope's variable weight axis (200-800) covers most needs. Use 400 for body and 600-700 for headings. No italics are available — use weight contrast or color for emphasis. The Cyrillic support makes it useful for international products targeting Eastern European markets.
Is Manrope on Google Fonts?
Yes, Manrope is available for free on Google Fonts. Get Manrope on Google Fonts ↗
Alternative For (4)
Manrope is a free alternative to the following premium fonts:
Semi-rounded variable sans with Cyrillic support
Compare Manrope
See how Manrope compares to other fonts side by side.
Variable Font Axes
Manrope is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
How to Use Manrope
Copy these code snippets to quickly add Manrope to your project.
CSS code for Manrope
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@100..900&display=swap');HTML code for Manrope
<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=Manrope:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Manrope
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'manrope': ['Manrope', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-manrope">Your text here</p>Next.js code for Manrope
// Using next/font (Next.js 13+)
import { Manrope } from 'next/font/google';
const manrope = Manrope({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={manrope.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Manrope'" }}>Your text</p>Expo and React Native code for Manrope
// Install: npx expo install @expo-google-fonts/manrope expo-font
import { useFonts, Manrope_400Regular } from '@expo-google-fonts/manrope';
export default function App() {
const [fontsLoaded] = useFonts({
Manrope_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Manrope_400Regular' }}>
Your text here
</Text>
);
}