If you need a "Google Font" that looks like Hiragino Kaku Gothic Pro → Use Noto Sans JP.
If you want to use real Hiragino on the web → Use the system font stack (for Apple users) or Adobe Fonts (with CC subscription).
If you need a complete guide for Google Fonts + Japanese typography → Let me know and I’ll write one for Noto Sans JP or M PLUS Rounded 1c instead. hiragino kaku gothic pro google font
Even though it isn't on Google Fonts, Hiragino Kaku Gothic Pro is still used on countless websites. Here is how it works in practice:
body
font-family: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
This CSS declaration tells the browser:
Do not load every weight of the Google Font. Limit to 400 and 700 to keep page speed high.
If you are designing a website specifically for a Japanese audience that predominantly uses Apple devices, you do not need Google Fonts at all. You can simply call Hiragino Kaku Gothic Pro directly in your CSS as a fallback. If you need a "Google Font" that looks
This technique does not host the font; it merely asks the user's operating system to supply it if available.
body
font-family: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Noto Sans JP", sans-serif;
Note on "Hiragino Sans": In macOS Sierra and later, Apple renamed the font family.
"Hiragino Kaku Gothic Pro"technically became"Hiragino Sans". To be safe, include both. Suggested CSS stack for approximating Hiragino on the
The Catch: On Windows or Linux, this line does nothing. Those users will see your fallback (e.g., Noto Sans JP or Arial). This is acceptable for a Mac-first internal tool, but not for a global public website.
Before diving into the "Google Font" aspect, let’s clarify what this typeface actually is. Hiragino Kaku Gothic Pro (ヒラギノ角ゴ Pro) is a high-quality Japanese Gothic (sans-serif) typeface developed by SCREEN Holdings (formerly Dainippon Screen). It is renowned for its exceptional legibility at small sizes, clean stroke endings, and balanced character widths.