font-family

p.test { font-family: "ＭＳ Ｐゴシック", sans-serif;}
p.test1 { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

Value	Description
Keyword	You can specify the font type using a keyword.
Font name	You can specify by font name. If the font name contains spaces, it must be enclosed in " or '.

Keyword	Description
sans-serif	Specifies a sans-serif (gothic-style) font.
serif	Specifies a serif (mincho-style) font.
cursive	Specifies a cursive or script-style font.
fantasy	Specifies a decorative font.
monospace	Specifies a monospace (fixed-width) font.

<p style='font-family: &quot;ＭＳ Ｐゴシック&quot;, sans-serif;'>This is a p element. font-family is set to &quot;ＭＳ Ｐゴシック&quot;, sans-serif.</p>

<p style='font-family: &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif;'>This is a p element. font-family is set to &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif.</p>

※ Version data based on MDN.

You can specify the font family.

When specifying a font family, it is a good practice to specify multiple values in case the font is not installed on the user's OS. Earlier values take priority, and values are separated by commas (,).

p.test { font-family: "ＭＳ Ｐゴシック", sans-serif;}
p.test1 { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

For Windows OS: since Windows XP support has ended, specifying the Meiryo font is the safest option. Meiryo is installed on all versions of Windows Vista and later.

Note that on almost all browsers running on Windows OS, the default font is "MS PGothic," so there is no need to explicitly specify it.

For macOS: it is best to specify "Hiragino Kaku Gothic ProN." Since macOS drops older devices quickly, and the switch from "Hiragino Kaku Gothic Pro" to "Hiragino Kaku Gothic ProN" happened quite a while ago, specifying only "Hiragino Kaku Gothic ProN" should be sufficient. The same applies to "Osaka."

Note that on macOS Safari, specifying Japanese font names has no effect. You must use the English name "Hiragino Kaku Gothic ProN" rather than the Japanese "ヒラギノ角ゴ ProN." However, other macOS browsers such as Firefox do accept Japanese font names, so using Japanese font names for CSS hacks is somewhat difficult.

Regarding Meiryo on macOS: installing Microsoft Office for Mac also installs the Meiryo font, so a significant number of macOS devices have Meiryo installed. Conversely, "Hiragino Kaku Gothic ProN" is rarely installed on Windows. If you want to serve Meiryo to Windows users and "Hiragino Kaku Gothic ProN" to macOS users, the following approach works well — the key is to list "Hiragino Kaku Gothic ProN" first.

p { "Hiragino Kaku Gothic ProN", Meiryo;}

For iOS (iPhone): specifying "Hiragino Kaku Gothic ProN" is safest. Note that "Hiragino Kaku Gothic Pro" (without the "N") is not installed on iOS.

For Android devices: the variation in installed fonts and anti-aliasing across devices is so extreme that specifying a font family is nearly impossible.

Taking all of the above into account, the safest font-family specification is as follows. For a sans-serif design, the following declaration should work without major issues.

p { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

You can also create a "composite font" by listing a Latin-only font before a Japanese font in the font-family property — Latin characters will use the Latin font, and Japanese characters will use the Japanese font. The following is an example combining the Latin font "Times" / "Times New Roman" with a Japanese font.

p { Times, "Times New Roman", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}

Font family choices vary depending on design direction, but be sure to pay attention to how Meiryo is handled and how Japanese font names behave across browsers.