Install FontSwap
Merriweather
About Merriweather
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 300, 400, 700, 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 →Merriweather is a text-optimized serif typeface designed by Eben Sorkin. Released on Google Fonts in 2011 and continuously refined since, it was designed specifically for comfortable on-screen reading, featuring a generous x-height, sturdy serifs, and open letterforms that remain legible even at small sizes.
History and Design
Eben Sorkin designed Merriweather with a clear mission: create a serif typeface that reads beautifully on screens. At a time when many serifs struggled with digital rendering, Merriweather proved that thoughtful design could achieve excellent screen readability without sacrificing elegance.
The design features sturdy, slightly wedge-shaped serifs that provide visual anchoring without the stark rectangularity of true slab serifs. This places Merriweather in a category sometimes called "thick serif" or "semi-slab"—offering slab serif warmth with transitional refinement.
Why Merriweather Excels
Merriweather became one of Google Fonts' most popular choices for body text because it delivers on its promise: comfortable extended reading on screens. The generous x-height aids legibility at small sizes, while the open counters prevent letters from appearing cramped or muddy on lower-resolution displays.
Technical Features
- Four weights: Light through Black with matching italics
- Screen optimized: Designed for digital display
- Extended character set: Latin and Cyrillic support
- Generous x-height: Improved small-size legibility
- Open counters: Clear letterform distinction
Best Use Cases
Merriweather excels in:
- Web body text: Long-form articles and blog content
- Digital publications: E-books and online magazines
- Corporate websites: Professional, readable content
- Documentation: Clear, comfortable reading experience
Usage Tips
Merriweather shines as body text at 16-18px with 1.5-1.7 line height. Light (300) works well for large text blocks; Regular (400) provides more presence for shorter content. Pair with Merriweather Sans for a cohesive family approach, or complement with Open Sans, Lato, or Source Sans Pro. Use Black weight sparingly—it's quite heavy and best reserved for major headlines.
Is Merriweather on Google Fonts?
Yes, Merriweather is available for free on Google Fonts. Get Merriweather on Google Fonts ↗
Alternative For (27)
Merriweather is a free alternative to the following premium fonts:
Screen-optimized serif with sturdy construction and excellent rendering
Screen-optimized slab with excellent readability and comprehensive weights
Compare Merriweather
See how Merriweather compares to other fonts side by side.
Font Pairings
Fonts that pair well with Merriweather based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Merriweather in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Merriweather.
@font-face {
font-family: 'Merriweather Fallback';
src: local('Georgia');
ascent-override: 98.4%;
descent-override: 27.3%;
line-gap-override: 0%;
size-adjust: 115.38%;
}How to Use Merriweather
Copy these code snippets to quickly add Merriweather to your project.
CSS code for Merriweather
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');HTML code for Merriweather
<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=Merriweather:wght@300;400;700;900&display=swap" rel="stylesheet">Tailwind code for Merriweather
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'merriweather': ['Merriweather', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-merriweather">Your text here</p>Next.js code for Merriweather
// Using next/font (Next.js 13+)
import { Merriweather } from 'next/font/google';
const merriweather = Merriweather({
subsets: ['latin'],
weight: ['300', '400', '700', '900'],
});
export default function Component() {
return (
<p className={merriweather.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Merriweather'" }}>Your text</p>Expo and React Native code for Merriweather
// Install: npx expo install @expo-google-fonts/merriweather expo-font
import { useFonts, Merriweather_400Regular } from '@expo-google-fonts/merriweather';
export default function App() {
const [fontsLoaded] = useFonts({
Merriweather_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Merriweather_400Regular' }}>
Your text here
</Text>
);
}