font-family決定版。2017最新のフォント指定の仕方【游ゴシック】どんな端末でも表示したい【日本語WEBフォント】

今までWEBのフォントの話として、WEBフォントの利便性や使い方についてまとめさせて頂きました。
どんなデバイスでも表示される！ユーザビリティ抜群の「WEBフォント」て？ - misallychan.com
超簡単！１分でできるWEBフォントの使い方【GoogleFonts】WEBのフォント - misallychan.com

今回は、font-familyで指定する際の、ベストな方法を考えていきます。

f:id:misallychan:20170921155936p:plain

CSS「font-family」のベストとは！

さて、結論からお伝えすると…

font-family:-apple-system,'BlinkMacSystemFont','Segoe UI','Avenir','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

色々考慮した結果、ベストはこれ↑でした。
さて、紐解いていきます。

英字フォントは一番前に！

最初にアップルのシステムフォントを読み込み。（わたしはとりあえず指定しているだけ…）
次にアルファベットのフォントたちを指定します。
MacとWindowsで読み込むフォントが違うので、読み込ませたいフォントを読み込み
最終的にはどちらも平等に表示される「Arial」を指定しています。

英字フォントを前に持ってくることで、半角英数字は日本語フォントとは違うフォントが表示されます。

美しいだけじゃない「游ゴシック」

日本語フォントの一番最初に指定している「游ゴシック」。これ、最近のWEBデザインの主流にもなっています。
何がスゴイってその理由……、
『Windows』『Mac』どちらにも標準搭載されているのです！！

今すぐにでも取り入れたい、ファーストチョイスのデバイスフォントとなるはず。

font-family指定順

フォントは読み込ませる優先順に指定するのがベストです。

CSSのfont-familyは、指定する順序が重要になります。
フォントが確認できなかった場合には次のフォント、次のフォント・・・、と表示されていくからです。

上記で紹介したCSSですと、日本語フォントからは游ゴシックが搭載されていない場合にはヒラギノ角ゴ、Windowsにはメイリオが表示されるようになっています。

とはいえメイリオもヒラギノ角ゴも2000年以降のフォント。
それより前のPCのために、MS PゴシックとOsakaを指定しておくのも有りですね。

font-family:-apple-system,'BlinkMacSystemFont','Segoe UI','Avenir','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

標準搭載フォントよりWEBフォント

まだ游ゴシックも定番とまではいっていない…
というわけで日本語フォントですがWEBフォントにも優秀なフォントがあります。

どんなデザインにも合う「NotoSansJapanese」

それが、日本語WEBフォントNotoSansです。

CSSなら

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

HTMLなら

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

これを読み込むことで、なんと！OS関係なくNotoフォントがどちらにも表示されちゃうんです。

というわけで、NotoSansを追加してみました。

font-family: 'Noto Sans Japanese','Helvetica Neue','Helvetica','Arial',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

ただ、日本語WEBフォントは大変重く速度が遅くなるため、ベストの設定とは言い切れません。
でもやっぱり、OSバージョンごとに違うなんて煩わしい。そんな方はぜひお試しを。

おしゃれで最先端な雰囲気を醸し出す「M +1p」

さらにさらに、NotoSansJapaneseよりもちょっと新しいおすすめフォントがあります。
それがM+1p。

HTMLでフォントを読み込み。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

CSSでフォントを呼び出し。

font-family: "Mplus 1p",'Helvetica Neue','Helvetica','Arial', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

これが本当に本当におしゃれなフォント。
わたしはこれを細く使うのにハマっています。

そして個人的にはNotoSansよりも表示が早い気もします。

WEBフォントは英数字も綺麗なので、必要最低限の英数字フォントしか指定していません。
むしろWEBフォントで英数字を表示したいので、一番前に指定しています。