Install FontSwap
Barlow Condensed
About Barlow Condensed
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Features
- 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 →Barlow Condensed is the narrow-width member of Jeremy Tribby's Barlow superfamily, a slightly rounded, low-contrast grotesk inspired by California's public infrastructure signage. Released under SIL OFL, it provides a full range of 9 weights with matching italics.
Design & Character
Barlow Condensed inherits the Barlow family's characteristic warmth — slightly rounded terminals and open apertures — while compressing the proportions for space-efficient typography. The result is a condensed face that feels approachable rather than rigid, distinguishing it from sharper industrial condensed fonts.
Best Use Cases
- Headlines and display text where horizontal space is limited
- Sports graphics, scoreboards, and athletic branding
- Data-dense dashboards and tables
- Wayfinding and signage systems
- News tickers and compact UI elements
Usage Tips
Barlow Condensed works well from 14px upward. For extremely tight layouts, use weights 600+ to maintain stroke visibility. The full weight range (Thin to Black) makes it versatile for typographic hierarchy within a single family. Pairs naturally with regular-width Barlow for body text.
Is Barlow Condensed on Google Fonts?
Yes, Barlow Condensed is available for free on Google Fonts. Get Barlow Condensed on Google Fonts ↗
Alternative For (6)
Barlow Condensed is a free alternative to the following premium fonts:
Narrow grotesk with similarly neutral character and 9 weights from Thin to Black
Slightly rounded condensed sans with enough weight range for sports and editorial
Geometric condensed with open apertures echoing Gotham's vernacular warmth
Dedicated condensed width matching Antenna's editorial focus and readable proportions
Condensed sans with softly rounded terminals that share Futura's approachable geometry
Condensed sans built for headlines with similar space efficiency and clarity
Compare Barlow Condensed
See how Barlow Condensed compares to other fonts side by side.
How to Use Barlow Condensed
Copy these code snippets to quickly add Barlow Condensed to your project.
CSS code for Barlow Condensed
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');HTML code for Barlow Condensed
<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=Barlow+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Tailwind code for Barlow Condensed
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'barlow-condensed': ['"Barlow Condensed"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-barlow-condensed">Your text here</p>Next.js code for Barlow Condensed
// Using next/font (Next.js 13+)
import { Barlow_Condensed } from 'next/font/google';
const barlow_condensed = Barlow_Condensed({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={barlow_condensed.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Barlow Condensed"' }}>Your text</p>Expo and React Native code for Barlow Condensed
// Install: npx expo install @expo-google-fonts/barlow-condensed expo-font
import { useFonts, Barlow_Condensed_400Regular } from '@expo-google-fonts/barlow-condensed';
export default function App() {
const [fontsLoaded] = useFonts({
Barlow_Condensed_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Barlow_Condensed_400Regular' }}>
Your text here
</Text>
);
}