Install FontSwap
Bricolage Grotesque
About Bricolage Grotesque
- 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 →Bricolage Grotesque is an eclectic display grotesque on Google Fonts, featuring optical size, weight, and width axes. Its playful, slightly irregular character brings personality to headline and editorial design that more restrained grotesques cannot.
Best Use Cases
Bricolage Grotesque shines in:
- Editorial design: Magazine headlines, feature articles, pull quotes
- Creative branding: Art galleries, studios, cultural institutions
- Event marketing: Conference materials, festival posters
- Display typography: Hero sections, landing page headlines
Usage Tips
The optical size axis is key — at smaller sizes, letterforms are more regular and readable; at larger sizes, distinctive details emerge. Use variable width to fine-tune line lengths. Pair with a clean sans-serif like Inter for body text to balance the eclectic character.
Is Bricolage Grotesque on Google Fonts?
Yes, Bricolage Grotesque is available for free on Google Fonts. Get Bricolage Grotesque on Google Fonts ↗
Alternative For (3)
Bricolage Grotesque is a free alternative to the following premium fonts:
Compare Bricolage Grotesque
See how Bricolage Grotesque compares to other fonts side by side.
Variable Font Axes
Bricolage Grotesque is a variable font with 3 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
| wdth | 75 | 100 | 100 |
| opsz | 10 | 14 | 48 |
How to Use Bricolage Grotesque
Copy these code snippets to quickly add Bricolage Grotesque to your project.
CSS code for Bricolage Grotesque
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@100..900&display=swap');HTML code for Bricolage Grotesque
<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=Bricolage+Grotesque:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Bricolage Grotesque
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'bricolage-grotesque': ['"Bricolage Grotesque"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-bricolage-grotesque">Your text here</p>Next.js code for Bricolage Grotesque
// Using next/font (Next.js 13+)
import { Bricolage_Grotesque } from 'next/font/google';
const bricolage_grotesque = Bricolage_Grotesque({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={bricolage_grotesque.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Bricolage Grotesque"' }}>Your text</p>Expo and React Native code for Bricolage Grotesque
// Install: npx expo install @expo-google-fonts/bricolage-grotesque expo-font
import { useFonts, Bricolage_Grotesque_400Regular } from '@expo-google-fonts/bricolage-grotesque';
export default function App() {
const [fontsLoaded] = useFonts({
Bricolage_Grotesque_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Bricolage_Grotesque_400Regular' }}>
Your text here
</Text>
);
}