What Is Japanese Font Inspector?
Japanese Font Inspector is a Chrome extension that identifies the actual font rendering Japanese text on any webpage — not just the declared CSS stack, but the real fallback chain. When Japanese and Latin characters appear on the same line, they very often render with different physical fonts via the browser's own unicode-range fallback. This extension shows you exactly which font is actually being used for each script type, with confidence levels for each fallback estimate.
Every feature works fully for free, forever. A one-time Pro purchase ($5) unlocks advanced features: full-page font audit, web-font service detection, and unlimited searchable history.
The Japanese Font Inspector — identify which font is actually rendering Japanese text on any webpage.
Who Should Use This Extension?
- Web Designers & Typographers — see exactly which fonts are rendering on live Japanese sites.
- Frontend Developers — debug font fallback issues and verify web font loading.
- Localization Engineers — ensure Japanese text renders with appropriate fonts across different browsers.
- Anyone working with Japanese text on the web — and wants to understand what's actually rendering.
Why You Can Trust Japanese Font Inspector
🔒 Trust built in Local-first, private by default, and built with transparency.
Japanese Font Inspector runs entirely in your browser. All analysis — script classification, fallback-font estimation, style extraction — happens locally on the page you're inspecting. None of it is sent to us or to any third party. The only network request the extension ever makes is license verification: if you enter a license key, that key (and nothing else) is sent to Gumroad's license-verification API to confirm it's valid. No inspected content is included in that request.
Battle-tested logic
Script classification tested against mixed Kanji/Hiragana/Latin, pure Kanji, pure Latin, empty strings, and emoji mixed with Japanese.
Transparent estimation
Fallback font detection uses canvas width comparison — shown with confidence levels (high/medium/low), not flat yes/no claims.
100% local storage
Inspection history stays on your device until you clear it or uninstall.
No hidden data collection
Minimal permissions — only storage, scripting, and activeTab. No telemetry.
Key Benefits
Detailed Feature Explanations
1. Element Inspection
What it does: Click the toolbar icon, then click "Inspect Element." The page enters inspection mode — hover over text elements to see them highlighted, then click to inspect. Results open in a new tab with a full report.
What's included:
- Detected Text — the text content of the selected element (up to 60 characters)
- Script Groups — breakdown of script types present (Kanji, Hiragana, Katakana, Latin, numbers, emoji, etc.) with character counts
- Declared Font Stack — the full CSS font-family declaration
- Fallback Chain Analysis — each font in the stack, with estimated availability and confidence level
- Typography — computed style: font size, weight, style, line-height, letter-spacing, color, writing mode
- Loaded Web Fonts — list of @font-face fonts that have finished loading on the page
2. Script Classification
What it does: Classifies each character into script types using standard, well-documented Unicode block ranges:
3. Fallback Chain Analysis
What it does: Estimates which font in a stack is actually rendering by measuring canvas text width. This is the same approach font-loading-detection libraries like FontFaceObserver use:
- Render sample text with a baseline font (one that almost certainly doesn't exist)
- Render the same text with the candidate font + the same baseline
- If widths differ meaningfully, the candidate font is likely available and rendering
- If widths match closely, the candidate font is likely NOT available
Font stack: "Noto Sans Japanese", "Hiragino Sans", sans-serif
1. "Noto Sans Japanese" → Not installed, matches baseline → Low confidence, likely not available
2. "Hiragino Sans" → Installed, width differs by 12% → High confidence, likely available ← likely rendering
3. sans-serif → Generic fallback, always available
4. Live Font Preview
What it does: Shows the inspected text rendered with the exact font stack, size, weight, style, and letter-spacing from the inspected element. You can edit the text to test how different Japanese characters render.
Why it matters: This lets you see how the font renders different characters — test Kanji you're curious about, compare with Hiragana/Katakana, or just see how Latin characters look alongside Japanese text.
5. Copy CSS
What it does: Copies the computed font CSS for the inspected element directly to your clipboard:
Why it matters: Perfect for designers who need to match typography exactly, or developers debugging font issues across different environments.
6. Full-Page Font Audit (Pro)
What it does: Walks every text-containing element on the page and builds a report showing:
- Each font family used on the page
- How many elements use that font
- Whether the font renders Japanese and/or Latin text
"Noto Sans JP" · 47 elements · JP + Latin
"Hiragino Sans" · 23 elements · JP + Latin
"Arial" · 12 elements · Latin only
"Times New Roman" · 3 elements · JP + Latin
7. Web-Font Service Detection (Pro)
What it does: Checks the page's script and stylesheet sources against known web-font service domains:
- Google Fonts — fonts.googleapis.com, fonts.gstatic.com
- Adobe Fonts (Typekit) — use.typekit.net
- TypeSquare — typesquare.com, fonts.typesquare.com
- FONTPLUS — webfont.fontplus.jp
Why it matters: Quickly identify which web-font service a Japanese site is using — useful for understanding licensing, performance, and fallback behavior.
8. Inspection History (Pro)
What it does: Saves every inspection you perform (up to 100 entries). The History page lets you:
- Free — view your last 3 inspections
- Pro — view all inspections, search by text or font name, clear history
Comparisons with Alternatives
| Feature | Japanese Font Inspector | Chrome DevTools | WhatFont | Font Finder |
|---|---|---|---|---|
| Price | Free (Pro $5 one-time) | Free | Free | Free |
| Script breakdown | ✅ Kanji/Hiragana/Katakana/Latin | ❌ No | ❌ No | ❌ No |
| Fallback chain analysis | ✅ With confidence levels | ⚠️ Declared stack only | ⚠️ Declared stack only | ⚠️ Declared stack only |
| Live font preview | ✅ Editable sample text | ❌ No | ❌ No | ❌ No |
| Full-page audit | ✅ Pro | ❌ No | ❌ No | ❌ No |
| Web-font service detection | ✅ Pro | ❌ No | ❌ No | ❌ No |
| Inspection history | ✅ Pro (searchable) | ❌ No | ❌ No | ❌ No |
| Copy CSS | ✅ Yes | ⚠️ Manual only | ❌ No | ❌ No |
| Data privacy | Local-first | Local | Unclear | Unclear |
Key User Pain Points & How This Extension Solves Them
Japanese Font Inspector shows the actual fallback chain with confidence levels for each font.
Script breakdown shows exactly which font renders Kanji, Hiragana, Katakana, and Latin separately.
Canvas-based estimation tells you which font in the stack is actually available — not just the declared stack.
Live font preview lets you type any text and see it rendered with the inspected element's exact font settings.
One-click copy gets you the full computed font CSS ready to paste.
Pro web-font service detection identifies Google Fonts, Adobe Fonts, TypeSquare, and FONTPLUS.
Why Upgrade to Pro?
🚀 Unlock advanced font analysis tools
The free tier gives you unlimited single-element inspection, script breakdown, fallback analysis, typography details, live font preview, and copy CSS. Pro ($5 one-time) adds three powerful features:
🆓 Free
- Unlimited single-element inspection
- Script breakdown (Kanji/Hiragana/Katakana/Latin)
- Fallback chain analysis with confidence levels
- Typography details
- Live font preview
- Copy CSS
- Last 3 history entries
⭐ Pro
- Everything in Free
- Full-page font audit
- Web-font service detection
- Unlimited, searchable history
- One-time purchase — pay once, keep forever
📈 ROI
- 💸 $5 one-time
- ⏱️ Saves hours of debugging
- 📊 Understand font fallback across projects
- 📝 Keep a searchable history of inspections
$5 one-time · pay once, keep forever
Setup & Configuration
Installation
- Install Japanese Font Inspector from the Chrome Web Store.
- Navigate to any webpage with Japanese text.
- Click the toolbar icon to open the popup.
- Click "Inspect Element," then click any text on the page.
- Results open in a new tab.
Configuring Preferences
- Open the Settings page from the popup or results page footer.
- UI Language: Switch between English and Japanese.
- Size Unit: Display font sizes in px or rem.
- Color Format: Display colors in HEX or RGB.
- Fallback Detection Sensitivity: Lenient (default) or Strict.
- Click Save Settings.
Sensitivity note: Strict requires a larger measured width difference before flagging a font as unavailable — useful for fonts with subtle metric differences, at the cost of more "low confidence" results.
Activating Pro License
- In Settings, scroll to "License."
- Paste your Gumroad license key.
- Click Verify.
Pricing: Free vs. Pro
- Unlimited single-element inspection
- Script breakdown
- Fallback chain analysis with confidence levels
- Typography details
- Live font preview
- Copy CSS
- Last 3 history entries
- Everything in Free
- Full-page font audit
- Web-font service detection
- Unlimited, searchable history
- One-time purchase — pay once, keep forever
One Pro license covers all features. Get your license at muhiuddinalam.gumroad.com/l/japanesefont.
Data Privacy, Performance & Permissions
- 🔒 Local‑only storage: All analysis happens locally. Inspection history is stored using Chrome's built-in local storage — on your own device, inside your own browser profile.
- 🔌 On‑demand injection: No persistent content script —
chrome.scripting.executeScriptruns only when you click Inspect Element. - 🛡️ Minimal permissions: Only
storage,scripting, andactiveTab. - 📋 Host permissions:
http://*/*andhttps://*/*— required to inspect fonts on any domain. No telemetry. - 🌐 The only network request: License verification to Gumroad when you enter a key. No inspected content is included in that request.
Common Mistakes to Avoid
Fix: Fallback detection uses canvas width comparison — it's a heuristic estimate, not a guaranteed browser API result. Results are shown with confidence levels (high/medium/low) rather than flat yes/no claims.
Fix: The extension only works on normal web pages (http:// or https://). Browser internal pages can't be scripted by extensions.
Fix: This is by design — a toolbar popup closes automatically the instant you click anywhere outside it, which includes clicking the page to pick an element. Results open in a new tab, so you never lose your inspection.
- ⚠️ Sensitivity setting: Strict mode requires a larger width difference before flagging a font as unavailable — useful for fonts with subtle metric differences, but may result in more "low confidence" results.
- ⚠️ History limit: Free tier shows only your last 3 inspections. Pro unlocks unlimited, searchable history.
- ⚠️ Web fonts: The fallback chain analysis can only detect fonts that are actually available — web fonts that haven't finished loading will be marked as unavailable.
A Note on Accuracy
Script classification uses standard, well-documented Unicode block ranges. Tested against 5 scenarios (mixed Kanji/Hiragana/Latin/number/punctuation, pure Kanji, pure Latin, an empty string, and emoji mixed with Japanese) before shipping.
Fallback font estimation uses a canvas width-comparison technique — the same approach font-loading-detection libraries like FontFaceObserver use. It is a heuristic estimate, not a certainty the browser can directly confirm. Every result carries an honest confidence level (high/medium/low) rather than a flat yes/no claim.
Font availability detection has a real, verifiable gap: it can only detect fonts that are actually available at inspection time. Web fonts that haven't finished loading will be marked as unavailable. The extension includes a "Loaded Web Fonts" section showing which @font-face-declared fonts have finished loading, giving you additional context.
Hostname-boundary matching for web-font service detection uses proper domain boundary matching (exact match or preceded by a dot) rather than naive substring checks. This avoids false positives like "media.network" incorrectly matching "media.net."
Unit conversion (px ↔ rem) uses the page's actual root font-size, not an assumed 16px default — some sites override html { font-size } (the common 62.5% trick), and rem conversion would be silently wrong without checking this. Tested against 5 scenarios (standard 16px root, a different px value, a decimal value, a non-px passthrough like 'normal', and a custom root font-size) before shipping.
Color conversion (RGB ↔ HEX) handles both standard rgb() and rgba() with alpha values, passing through keywords like 'transparent' unchanged. Tested against 5 scenarios (standard rgb(), rgba() with alpha, already-hex passthrough, zero-padding edge case, and 'transparent' keyword passthrough) before shipping.
Frequently Asked Questions
Is this extension really free?
Yes. Every core feature works fully for free, forever — unlimited single-element inspection, script breakdown, fallback analysis, typography details, live font preview, and copy CSS. Pro ($5 one-time) adds full-page audit, web-font service detection, and unlimited searchable history.
How does the fallback detection work?
It uses a canvas width-comparison technique: render sample text with a baseline font (one that almost certainly doesn't exist), then render the same text with the candidate font + the same baseline. If widths differ meaningfully, the candidate font is likely available. Results are shown with confidence levels (high/medium/low) rather than flat yes/no claims.
Does this extension work on any website?
Yes — it works on any HTTP/HTTPS page. Browser internal pages (chrome://, chrome-extension://) can't be scripted by extensions.
What happens if I uninstall the extension?
All data (settings, inspection history, license status) is removed from your browser. If you have a Pro license, you can re-enter your key after reinstalling to restore access.
Is Pro a subscription or one-time?
Pro is a one-time purchase — $5, pay once, keep forever. No recurring subscription.
Why does the popup close when I click the page?
This is by design — a toolbar popup closes automatically the instant you click anywhere outside it, which includes clicking the page to pick an element. Results open in a new tab, so you never lose your inspection.
Ready to identify the fonts rendering Japanese text?
Free: unlimited single-element inspection · Pro: $5 one-time
Get Japanese Font Inspector Pro → Install Free on Chrome Web Store →Japanese Font Inspector · Version 1.0 · Built with ❤️ for Chrome · Privacy Policy · Contact Me
