Install FontSwap
Newsreader
About Newsreader
- 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 →Newsreader is an editorial serif by Production Type, designed for digital news environments. Its optical size axis automatically adjusts letterform details for caption, text, and display sizes — a feature traditionally reserved for premium type families.
Best Use Cases
Newsreader shines in:
- News platforms: Article body text, headlines, bylines
- Editorial blogs: Long-form journalism, opinion pieces
- Magazine-style layouts: Feature articles, pull quotes
- Newsletters: Email typography with editorial authority
Usage Tips
Newsreader's optical size axis is its standout feature — enable it for automatic optimization across text and display sizes. Use 400 for body text and 600-700 for headlines. The editorial character makes it a natural pairing with a clean grotesque like Inter or Switzer for navigation and UI elements.
Is Newsreader on Google Fonts?
Yes, Newsreader is available for free on Google Fonts. Get Newsreader on Google Fonts ↗
Alternative For (4)
Newsreader is a free alternative to the following premium fonts:
Compare Newsreader
See how Newsreader compares to other fonts side by side.
Variable Font Axes
Newsreader is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 800 |
| opsz | 6 | 16 | 72 |
How to Use Newsreader
Copy these code snippets to quickly add Newsreader to your project.
CSS code for Newsreader
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@100..900&display=swap');HTML code for Newsreader
<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=Newsreader:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Newsreader
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'newsreader': ['Newsreader', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-newsreader">Your text here</p>Next.js code for Newsreader
// Using next/font (Next.js 13+)
import { Newsreader } from 'next/font/google';
const newsreader = Newsreader({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={newsreader.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Newsreader'" }}>Your text</p>Expo and React Native code for Newsreader
// Install: npx expo install @expo-google-fonts/newsreader expo-font
import { useFonts, Newsreader_400Regular } from '@expo-google-fonts/newsreader';
export default function App() {
const [fontsLoaded] = useFonts({
Newsreader_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Newsreader_400Regular' }}>
Your text here
</Text>
);
}