Install FontSwap
Montserrat
About Montserrat
- 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 →Montserrat is a geometric sans-serif typeface designed by Julieta Ulanovsky, inspired by the old posters and signs in the traditional Montserrat neighborhood of Buenos Aires. Released as an open-source project, it has become one of the most popular free alternatives to premium geometric sans-serif fonts.
History and Design
The project began in 2011 when Julieta Ulanovsky started documenting the unique urban typography of Buenos Aires' Montserrat neighborhood. The typeface captures the beauty of early twentieth-century urban lettering while being optimized for modern digital use. In 2017, the family was completely redrawn as a variable font with an extended character set.
Why Montserrat is Popular
Montserrat's geometric forms and extensive weight range make it an excellent substitute for premium fonts like Proxima Nova and Gotham. Its clean, modern aesthetic works well across digital and print media. The variable font version offers fine-tuned control over weight, making it highly versatile for responsive design.
Technical Features
- Variable font: Full weight axis from Thin (100) to Black (900)
- Complete italic family: All weights include true italics
- Extended language support: Latin, Cyrillic, and Vietnamese character sets
- OpenType features: Tabular figures, stylistic alternates, and more
Best Use Cases
Montserrat excels in:
- Headlines and display text: Strong presence at large sizes
- Brand identity: Modern geometric aesthetic for logos and marketing
- Web applications: Excellent screen rendering across all sizes
- UI design: Clear and legible for interface elements
Usage Tips
For body text, use weights 400-500 for optimal readability. For headlines, weights 600-800 provide strong visual impact. Pair Montserrat with serif fonts like Merriweather or Lora for classic contrast in editorial layouts.
Is Montserrat on Google Fonts?
Yes, Montserrat is available for free on Google Fonts. Get Montserrat on Google Fonts ↗
Alternative For (11)
Montserrat is a free alternative to the following premium fonts:
Very close geometric proportions with similar weight range and bold presence
Very close geometric proportions, excellent weight range
Comparable geometric structure with slightly more angular forms
Versatile geometric sans with comprehensive weight range
Compare Montserrat
See how Montserrat compares to other fonts side by side.
Variable Font Axes
Montserrat 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 Montserrat based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Montserrat in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Montserrat.
@font-face {
font-family: 'Montserrat Fallback';
src: local('Arial');
ascent-override: 96.8%;
descent-override: 25.1%;
line-gap-override: 0%;
size-adjust: 101.24%;
}How to Use Montserrat
Copy these code snippets to quickly add Montserrat to your project.
CSS code for Montserrat
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');HTML code for Montserrat
<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=Montserrat:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Montserrat
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'montserrat': ['Montserrat', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-montserrat">Your text here</p>Next.js code for Montserrat
// Using next/font (Next.js 13+)
import { Montserrat } from 'next/font/google';
const montserrat = Montserrat({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={montserrat.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Montserrat'" }}>Your text</p>Expo and React Native code for Montserrat
// Install: npx expo install @expo-google-fonts/montserrat expo-font
import { useFonts, Montserrat_400Regular } from '@expo-google-fonts/montserrat';
export default function App() {
const [fontsLoaded] = useFonts({
Montserrat_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Montserrat_400Regular' }}>
Your text here
</Text>
);
}