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.
Alternative For (25)
Merriweather is a free alternative to the following premium fonts:
Screen-optimized slab with excellent readability and comprehensive weights
How to Use Merriweather
Copy these code snippets to quickly add Merriweather to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');HTML Link Tags
<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 CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'merriweather': ['Merriweather', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-merriweather">Your text here</p>React / Next.js
// 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>