Install FontSwap
Noto Sans JP
About Noto Sans JP
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 Sans JP is the Japanese subset of Noto Sans CJK, a Pan-CJK typeface co-developed by Google and Adobe. Adobe releases the same font as Source Han Sans. It is one of the most comprehensive free Japanese typefaces available, covering the full range of modern Japanese characters.
History and Design
The Noto project ("No Tofu" — eliminating missing character boxes) began as a collaboration between Google and Adobe to create a unified typeface covering all of Unicode. For CJK languages, the project brought together multiple foundries: Iwata Corporation handled Japanese character design, while Changzhou Sinotype covered Chinese and Sandoll Communications handled Korean. The result is a harmonized Pan-CJK family where Japanese, Chinese, and Korean characters share consistent stroke weight and proportions.
Why Noto Sans JP Stands Out
Noto Sans JP provides something rare in the free font world: a complete, professional-quality Japanese typeface with a wide weight range and variable font support. Most free Japanese fonts offer only one or two weights. Noto Sans JP delivers six static weights (or continuous variable weight), making it suitable for everything from delicate UI labels to bold display headlines.
Technical Features
- Variable font: Continuous weight axis from Thin (100) to Black (900)
- Comprehensive Japanese: Full JIS character set with regional glyph variants
- Pan-CJK harmony: Designed to work alongside Noto Sans SC, TC, and KR
- Extensive Latin: Includes Latin, Latin Extended, and Cyrillic for multilingual documents
- Also known as: Source Han Sans (Adobe's name for the same font)
Best Use Cases
Noto Sans JP excels in:
- Web applications: The variable font allows precise weight tuning for responsive designs
- Multilingual interfaces: Harmonized CJK and Latin characters for consistent cross-language layouts
- Corporate communications: Clean, neutral aesthetic suitable for business contexts
- Print design: Wide weight range supports both body text and headline use
Usage Tips
Use weight 400 for body text and 700 for headings. The variable font version is ideal for web — it allows fine-tuning weight for different screen sizes without loading multiple files. For the smallest file size, load only the Japanese subset from Google Fonts rather than the full Source Han Sans. Pair with Noto Serif JP for serif-sans contrast in editorial layouts.
Is Noto Sans JP on Google Fonts?
Yes, Noto Sans JP is available for free on Google Fonts. Get Noto Sans JP on Google Fonts ↗
Compare Noto Sans JP
See how Noto Sans JP compares to other fonts side by side.
Variable Font Axes
Noto Sans JP is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Noto Sans JP
Copy these code snippets to quickly add Noto Sans JP to your project.
CSS code for Noto Sans JP
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');HTML code for Noto Sans JP
<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+Sans+JP:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Noto Sans JP
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'noto-sans-jp': ['"Noto Sans JP"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-noto-sans-jp">Your text here</p>Next.js code for Noto Sans JP
// Using next/font (Next.js 13+)
import { Noto_Sans_JP } from 'next/font/google';
const noto_sans_jp = Noto_Sans_JP({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={noto_sans_jp.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Noto Sans JP"' }}>Your text</p>Expo and React Native code for Noto Sans JP
// Install: npx expo install @expo-google-fonts/noto-sans-jp expo-font
import { useFonts, Noto_Sans_JP_400Regular } from '@expo-google-fonts/noto-sans-jp';
export default function App() {
const [fontsLoaded] = useFonts({
Noto_Sans_JP_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Noto_Sans_JP_400Regular' }}>
Your text here
</Text>
);
}