Install FontSwap
Frijole
About Frijole
- Source
- Google Fonts ↗
- Classification
- display
- Weights
- 400
- Features
- Standard
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 →Frijole is a bold, textured display typeface from Font Diner. Its thick characters and irregular, distressed edges create a sense of movement and energy — like hand-painted signage with personality baked into every letter.
Best Use Cases
Frijole shines in:
- Restaurant and food branding: Menus, signage, food truck lettering
- Event promotions: Posters, flyers, social media graphics
- Children's content: Book covers, game interfaces, playful headers
- Novelty products: T-shirts, stickers, merchandise
Usage Tips
Frijole is a single-weight display font meant for headlines only. Its textured strokes break down at small sizes, so keep it at 24px or larger. Pair with a clean sans-serif like Source Sans 3 to balance its visual weight.
Is Frijole on Google Fonts?
Yes, Frijole is available for free on Google Fonts. Get Frijole on Google Fonts ↗
Alternative For (1)
Frijole is a free alternative to the following premium fonts:
Bold textured display with playful energy for casual branding
Compare Frijole
See how Frijole compares to other fonts side by side.
How to Use Frijole
Copy these code snippets to quickly add Frijole to your project.
CSS code for Frijole
@import url('https://fonts.googleapis.com/css2?family=Frijole:wght@400&display=swap');HTML code for Frijole
<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=Frijole:wght@400&display=swap" rel="stylesheet">Tailwind code for Frijole
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'frijole': ['Frijole', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-frijole">Your text here</p>Next.js code for Frijole
// Using next/font (Next.js 13+)
import { Frijole } from 'next/font/google';
const frijole = Frijole({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={frijole.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Frijole'" }}>Your text</p>Expo and React Native code for Frijole
// Install: npx expo install @expo-google-fonts/frijole expo-font
import { useFonts, Frijole_400Regular } from '@expo-google-fonts/frijole';
export default function App() {
const [fontsLoaded] = useFonts({
Frijole_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Frijole_400Regular' }}>
Your text here
</Text>
);
}