font-familyの指定方法

font-familyの指定を古い案件から使いまわしたりすることが多いので、自分用に調べてみたことをメモ。

基本セット

特に指定のない場合に使うゴシックのセットで、Windowsはメイリオ、Macはヒラギノの想定です。

CSS

body {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

基本セットのゴシックのデモページ

明朝の場合はWindowsはHG明朝E、Macはヒラギノです。

CSS

body {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ＭＳ 明朝", serif;
}

基本セットの明朝のデモページ
　

游書体

游書体の指定がたまにあるので、游ゴシックをベースにしたセットです。
游書体はWindowsとMacで微妙に表記が違うらしいので4つ記述しています。

CSS

body {
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

游ゴシックのデモページ

游明朝のセットです。

CSS

body {
	font-family: "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ＭＳ 明朝", serif;
}

游明朝のデモページ
　

スマホ向け

スマホ用サイトを作るときのセットです。
RobotoとDroid SansはAndroid用で、iOSはヒラギノを指定していますが、ProではなくProNしか入っていないようなので注意が必要です。

CSS

body {
	font-family: Verdana, Roboto, "Droid Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

スマホ向けのデモページ
　

PC・スマート向け

PC向けとスマホ向けをごちゃまぜにしたセットです。

CSS

body {
	font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

PC・スマート向けのデモページ
　

省略出来たりもっと良い指定方法があるかもですが、とりあえず自分用に調べたことのまとめでした。

【参考サイト】

• Font-familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
• CSSでのフォント指定について考える（2014年） – DTP Transit
• CSSのfont-family指定に関する考察 2014年版 ｜ セブンシックス
• もう迷わない、「@font-familyはこれでOK！」を色々考えてみた。 | unitopi – ユニトピ –
• font-familyでMacからWindowsまで明朝体指定 – Qiita
• CSS の font-family で明朝指定 – Qiita
• CSSフォント指定を考える2015 | Re Simple inc.
• スマートフォンを考慮したフォント指定の検討 | Web Tips
• Android版Chrome向けのfont-familyを考える | まほよろじぃ
• 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い – 強火で進め