Install FontSwap
Noto Serif
About Noto Serif
- 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 →Noto Serif is Google's pan-Unicode serif typeface, part of the Noto project to eliminate tofu (missing character boxes) across all writing systems. Its Latin subset delivers a refined, traditional serif suitable for long-form reading.
Best Use Cases
Noto Serif excels in:
- Publishing: Book typography, long articles, academic papers
- Multilingual content: Projects spanning many writing systems
- Government and institutional: Official documents, public communications
- Editorial design: Magazine body text, newspaper columns
Usage Tips
Noto Serif's variable axes (weight and width) provide exceptional flexibility. Use 400 for body text at 16-18px with 1.5-1.6 line height. The condensed widths are useful for fitting more text in tight columns. For multilingual projects, Noto Serif pairs seamlessly with Noto Sans.
Is Noto Serif on Google Fonts?
Yes, Noto Serif is available for free on Google Fonts. Get Noto Serif on Google Fonts ↗
Alternative For (4)
Noto Serif is a free alternative to the following premium fonts:
Compare Noto Serif
See how Noto Serif compares to other fonts side by side.
Variable Font Axes
Noto Serif is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| wdth | 62.5 | 100 | 100 |
How to Use Noto Serif
Copy these code snippets to quickly add Noto Serif to your project.
CSS code for Noto Serif
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@100..900&display=swap');HTML code for Noto Serif
<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=Noto+Serif:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Noto Serif
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'noto-serif': ['"Noto Serif"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-noto-serif">Your text here</p>Next.js code for Noto Serif
// Using next/font (Next.js 13+)
import { Noto_Serif } from 'next/font/google';
const noto_serif = Noto_Serif({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={noto_serif.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Noto Serif"' }}>Your text</p>Expo and React Native code for Noto Serif
// Install: npx expo install @expo-google-fonts/noto-serif expo-font
import { useFonts, Noto_Serif_400Regular } from '@expo-google-fonts/noto-serif';
export default function App() {
const [fontsLoaded] = useFonts({
Noto_Serif_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Noto_Serif_400Regular' }}>
Your text here
</Text>
);
}