Install FontSwap
Montserrat Underline
About Montserrat Underline
- Source
- Google Fonts ↗
- Classification
- display
- 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 →Montserrat Underline (formerly Montserrat Subrayada) is a decorative variant of Montserrat where every character features a built-in underline stroke. Redesigned and expanded in November 2024, it grew from 2 weights and 250 glyphs to 9 variable weights with over 2,700 glyphs.
History and Design
Originally released as "Montserrat Subrayada" ("subrayada" meaning "underlined" in Spanish), this display variant was renamed to "Montserrat Underline" in late 2024 as part of a major overhaul. The redesign by Julieta Ulanovsky and collaborators expanded the family from just Regular and Bold to a full 9-weight variable font, dramatically increasing its versatility.
Why Montserrat Underline Works
The integrated underline creates instant emphasis without CSS or manual decoration. Each character sits above a consistent baseline stroke, producing a uniform underlined appearance that looks intentional rather than tacked on. At heavy weights, the underline merges with the letterforms for a striking poster-style effect.
Technical Features
- Variable font: Full weight axis from Thin (100) to Black (900)
- 2,700+ glyphs: Comprehensive Latin, Cyrillic, and Vietnamese support
- Integrated underline: Built into each character, not a text-decoration overlay
- 9 static weights: Available as individual files or single variable font
Best Use Cases
Montserrat Underline excels in:
- Headlines and titles: Instant emphasis without additional styling
- Poster design: Bold, attention-grabbing display text
- Social media graphics: Quick, impactful text treatments
- Logo design: Distinctive typographic marks
Usage Tips
Use Montserrat Underline strictly for display purposes — headlines, titles, and short text. The integrated underline loses clarity at body text sizes. Weights 600-900 produce the strongest visual effect. Pair with standard Montserrat or Montserrat Alternates for body text to maintain family consistency.
Is Montserrat Underline on Google Fonts?
Yes, Montserrat Underline is available for free on Google Fonts. Get Montserrat Underline on Google Fonts ↗
Compare Montserrat Underline
See how Montserrat Underline compares to other fonts side by side.
Variable Font Axes
Montserrat Underline is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Montserrat Underline
Copy these code snippets to quickly add Montserrat Underline to your project.
CSS code for Montserrat Underline
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Underline:wght@100..900&display=swap');HTML code for Montserrat Underline
<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+Underline:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Montserrat Underline
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'montserrat-underline': ['"Montserrat Underline"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-montserrat-underline">Your text here</p>Next.js code for Montserrat Underline
// Using next/font (Next.js 13+)
import { Montserrat_Underline } from 'next/font/google';
const montserrat_underline = Montserrat_Underline({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={montserrat_underline.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Montserrat Underline"' }}>Your text</p>Expo and React Native code for Montserrat Underline
// Install: npx expo install @expo-google-fonts/montserrat-underline expo-font
import { useFonts, Montserrat_Underline_400Regular } from '@expo-google-fonts/montserrat-underline';
export default function App() {
const [fontsLoaded] = useFonts({
Montserrat_Underline_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Montserrat_Underline_400Regular' }}>
Your text here
</Text>
);
}