getComputedStyle(element).fontFamily returns the CSS declaration: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif. That's not the font that rendered. It's a priority list. The browser picks the first one that's available and contains a glyph for the character being rendered.
For Latin text, this distinction usually doesn't matter — Windows, macOS, and Linux have converged on a small set of common system fonts. For Japanese, it matters enormously. The visual weight, stroke contrast, and letterform style of Hiragino, Yu Gothic, and Noto Sans JP are genuinely different. A site designed on macOS (where Hiragino is the system Japanese font) looks different on Windows (where Yu Gothic is the fallback).
Here's how to figure out what's actually rendering, and what I learned building — hover any text on a Japanese page to see the resolved font with metadata. Free on Chrome Web Store.
What's the hairiest font detection edge case you've run into? The character-level fallback mixing is what bit me most — Japanese + emoji in the same element is a particular mess.
SOCIAL SHARE CARD GENERATOR