Install FontSwap
Bitter
About Bitter
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- Variable (100-900)
- Features
- Variable, 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 →Bitter is a slab serif designed by Sol Matas at Huerta Tipográfica, optimized specifically for screen reading. Its sturdy construction and open counters maintain clarity on low-resolution displays where traditional serifs break down.
Best Use Cases
Bitter works well for:
- Blog typography: Long-form articles, essay-style content
- E-readers and reading apps: Optimized for extended screen reading
- News sites: Article body text, editorial content
- Print-to-screen: Projects transitioning print content to digital
Usage Tips
Bitter's variable weight axis (100-900) with full italics handles any editorial hierarchy. Use 400 at 18px for body text — its screen-optimized construction shines at text sizes. The slab-serif character pairs naturally with geometric sans-serifs like Montserrat or Poppins for contrast.
Is Bitter on Google Fonts?
Yes, Bitter is available for free on Google Fonts. Get Bitter on Google Fonts ↗
Alternative For (4)
Bitter is a free alternative to the following premium fonts:
Screen-optimized slab serif with comparable editorial character
Compare Bitter
See how Bitter compares to other fonts side by side.
Variable Font Axes
Bitter is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Bitter
Copy these code snippets to quickly add Bitter to your project.
CSS code for Bitter
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@100..900&display=swap');HTML code for Bitter
<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=Bitter:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Bitter
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'bitter': ['Bitter', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-bitter">Your text here</p>Next.js code for Bitter
// Using next/font (Next.js 13+)
import { Bitter } from 'next/font/google';
const bitter = Bitter({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={bitter.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Bitter'" }}>Your text</p>Expo and React Native code for Bitter
// Install: npx expo install @expo-google-fonts/bitter expo-font
import { useFonts, Bitter_400Regular } from '@expo-google-fonts/bitter';
export default function App() {
const [fontsLoaded] = useFonts({
Bitter_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Bitter_400Regular' }}>
Your text here
</Text>
);
}