Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

font-family

フォントファミリーを指定できます。

複数の値を設定することができ、より前方に指定してあるフォントが優先的に反映されます。区切りは『,』を使用します。閲覧しているOSに『font-family』プロパティで指定されたフォントが一切インストールされていない場合はブラウザ標準のフォントファミリーで表示されます。

サンプルコード
p.test { font-family: "MS Pゴシック", sans-serif;}
p.test1 { "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
指定可能な値一覧
概要
キーワードフォントの種類を表すキーワードで指定できます。
フォント名フォント名で指定できます。フォント名に半角スペースが含まれる場合は『"』か『'』で囲う必要があります。
指定可能なキーワード一覧
キーワード概要
sans-serifゴシック系フォントを指定します。
serif明朝系フォントを指定します。
cursive筆記体系、草書体系のフォントを指定します。
fantasy様々な装飾が加わっているフォントを指定します。
monospace等幅系フォントを指定します。
ブラウザでの表示結果
<p style='font-family: &quot;MS Pゴシック&quot;, sans-serif;'>ここはp要素です。『font-family: &quot;MS Pゴシック&quot;, sans-serif』と指定しています。</p>

<p style='font-family: &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif;'>ここはp要素です。『font-family: &quot;Hiragino Kaku Gothic ProN&quot;, Meiryo, sans-serif』と指定しています。</p>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

フォントファミリーを指定できます。

フォントファミリーを指定する際は閲覧しているOSにフォントがインストールされていない場合を考え複数の値を指定しておくようにすると良いでしょう。より前方に指定してあるフォントが優先的に反映されます。区切りは『,』を使用します。

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

『WindowsOS』での無難なフォントファミリーの指定についてですが、『Windows XP』のサポートが切り捨てられた今現在は『メイリオ』フォントを指定しておくのが無難です。『Windows Vista』以降のWindowsOSには全て『メイリオ』がインストールされています。

ちなみにWindowsOS上で動作するほぼ全てのブラウザでは標準フォントが『MS Pゴシック』となっていますので『MS Pゴシック』をわざわざ指定する必要ない、と考えてしまって問題ないかと思います。

『MacOS』の場合は『Hiragino Kaku Gothic ProN』を指定するようにすると良いでしょう。『MacOS』は古いデバイスの切り捨てが早く、『Hiragino Kaku Gothic Pro』から『Hiragino Kaku Gothic ProN』へ切り替えが行われたのはかなり前なので、『Hiragino Kaku Gothic ProN』だけ指定しておけば問題ありません。『Osaka』に関しても同様です。

尚、『MacOS』の『Safari』では日本語のフォントファミリーの指定は無効となりますのでご注意ください。『ヒラギノ角ゴ ProN』ではなく『Hiragino Kaku Gothic ProN』と指定する必要があります。ちなみに『MacOS』の『Firefox』などでは日本語でのフォントのファミリーの指定が可能ですので『日本語のフォント名』をCSSハックなどの目的で使用するのは少々難しいでしょう。

『MacOS』での『メイリオ』フォントについてですが、MacOS用のOfficeなどをインストールすると『メイリオ』フォントも同時にインストールされます。なのでかなりの数のMacOSに『メイリオ』がインストールされている、と考えておきましょう。逆に『Windows OS』には『Hiragino Kaku Gothic ProN』がインストールされているパターンは少なめなので、『Windows OS』では『メイリオ』、『MacOS』では『Hiragino Kaku Gothic ProN』、と出し分けしたい場合は以下のようにすると良いかもしれません。『Hiragino Kaku Gothic ProN』が手前にいるのがポイントです。

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

『iOS(iPhone)』は『Hiragino Kaku Gothic ProN』を指定しておくのが無難です。ちなみに『iOS』は『Hiragino Kaku Gothic Pro』がインストールされていないのでご注意ください。

『Android』デバイスに関しては、デバイスによってインストールされているフォントの種類やアンチエイリアスのかかり具合の差が激しすぎるため、フォントファミリーの指定はほぼ不可能と考えて良いです。

上記の事を踏まえた無難なフォントファミリーの指定は以下となります。ゴシック系フォントで構築するならば以下を記述しておけば大きな問題は発生しないでしょう。

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

尚、『font-family』プロパティで『日本語フォント』の前に『英語の文字データしか含んでしていないフォント』を指定することで英語は英語フォント、日本語は日本語フォント、といったような『合成フォント』を構築することができます。以下は英字フォントである『Times』もしくは『Times New Roman』と日本語フォントの合成例です。

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

フォントファミリーはデザインの方向性によって様々なパターンがありますが、『メイリオ』フォントの扱いと『日本語でのフォント名』の扱いにはご注意下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。