Barlow Condensed font
Barlow Condensed is a Google Font display family, free for commercial use on Google Fonts. Ideal for bold hero headlines, posters, and high-impact marketing sections.
Display · Google Fonts · Commercial free
Barlow Condensed
Barlow Condensed is a Google Font display family, free for commercial use on Google Fonts. Ideal for bold hero headlines, posters, and high-impact marketing sections.
Weight 400
The quick brown fox
Weight 500
The quick brown fox
Weight 600
The quick brown fox
Weight 700
The quick brown fox
Character set
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Display sample
Build your brand kit with Barlow Condensed
Body sample
Use Barlow Condensed in landing pages, dashboards, and DESIGN.md exports. Pair it with a complementary body font for readable paragraphs and UI labels.
Embed code
Copy the snippet for your stack — same pattern as Google Fonts, ready for production sites and AI agent repos.
HTML link tag
html
<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@400;500;600;700&display=swap" rel="stylesheet" />CSS @import
css
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');
body {
font-family: 'Barlow Condensed', sans-serif;
}CSS font-family
css
.font-barlow-condensed {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
}Next.js next/font/google
typescript
import { Barlow_Condensed } from "next/font/google";
const font = Barlow_Condensed({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
variable: "--font-barlow-condensed",
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={font.variable}>
<body>{children}</body>
</html>
);
}Tailwind CSS
css
@import "tailwindcss";
@theme {
--font-barlow-condensed: 'Barlow Condensed', sans-serif;
}
/* Usage: class="font-[family-name:var(--font-barlow-condensed)]" */DESIGN.md snippet
markdown
## Typography
- **Headline font:** Barlow Condensed (Google Fonts)
- **CSS stack:** 'Barlow Condensed', sans-serif
- **Weights:** 400;500;600;700
```html
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap" rel="stylesheet" />
```Best for
- Hero headlines
- Posters
- Sports brands
- Bold CTAs