みんさん、こんにちは！
今回はこのブログサイトでも使っているfont-familyの設定をご紹介します。
font-familyの設定を怠っていませんか？
font-familyの設定次第ではデザインがいくら良くてもバランスが崩れてしまいます。
また、記事も読みづらくなってしまうかもしれません。
そうならないために、私も使っている今年2018年流行間違い無しの、font-familyの設定をご紹介致します！
※飽くまで個人の観点からの見解です（笑）
他サイトのfont-family
ご紹介に入る前に、有名なサイトがどんなcssのfont0-familyを設定しているか見てみましょう。
LAURIER PRESS(ローリエプレス)
女性から絶大な支持を得るファッション・恋愛の情報サイトです。
こちらのサイトでは、
font-family: '游ゴシック', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, 'Helvetica Neue', sans-serif;「遊ゴシック」を基準としていますが、実際には「ヒラギノ角ゴ」が反映されていました。
「遊ゴシック」は記述方法がいくつかあるので、正しく設定していないと環境によっては反映されないです…
少し残念ですね。
RETRIP[リトリップ]
こちらは旅行者向けのキュレーションメディアサイトです。
最近のキュレーション型メディアの中では1番の支持を得ていると言っても過言ではないサイトです。
さて肝心のfont-familyですが、
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;「ヒラギノ角ゴ」を採用しています。
LIG
Web制作やメディアサイト運営で有名な株式会社LIGさんのホームページです。
こちらのサイトのfont-familyは…
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;出てきました。
游ゴシック体です！
ロゴと游ゴシック体がマッチしていてとてもおしゃれだと思います。
ローリエプレスとリトリップは女性をターゲットにしているので「ヒラギノ角ゴ」のような可愛いフォントを採用してるのかもしれません。
他にも沢山のサイトを調べましたが「遊ゴシック」「ヒラギノ角ゴ」の2強でした。
どちらかというと、おしゃれ志向の強いサイトは「遊ゴシック」を採用していました。
現在流行中は「遊ゴシック」と言えるでしょう。
2018年流行間違い無し?のfont-familyのおすすめ設定
上記での他サイトfont-family紹介 のように、font-familyの設定で「游ゴシック」を設定しているサイトをよく見かけます。
確かに見やすいしおしゃれ感もあるので好きです。
ですが設定を少し間違えるととても残念な感じになります。
実際Window環境では「游ゴシック」は少し残念なことに……
これはWindow環境で「游ゴシック」が細字が標準になっているからです。
つまりcssのfont-familyの設定で「游ゴシック」のミディアムをどの環境でも標準にする設定をしなければいけません。
また、font-familyに「遊ゴシック」と記述すると、ある環境では正しく反映されません。
「遊ゴシック体」「遊ゴシック medium」のように遊ゴシックの属性を指定したりとややこしいです。
私はこれが面倒なので「游ゴシック」をfont-familyの設定から除外しました！
断腸の思いで。
では何をfont-familyで設定するのか。
font-familyで設定するべきフォント
これからの流行は間違いなく「Noto Sans Japanese」だと私は思っています。
このフォントの親である「Noto Sans」はGoogleとAdobeが共同開発したフォントです。
Adobeからは「源ノ角ゴシック」という名前で公開されています。
「Noto Sans」を元に日本語利用出来るようになったWEBフォントが「Noto Sans Japanese」です。
この「Noto Sans Japanese」はとにかく美しいです！
どうですか？とても見やすくないですか？
しかもおしゃれ！
では、英字はどんなフォントがいいのか。
話の流れからすると「Noto Sans」と言いたいところなのですが、個人的に「Noto Sans」より勝っていると思う英字フォントがあります。
これです！
出典：Google Fonts
「Lato」フォントです。
シンプルかつ、でもおしゃれで見やすくないですか？
この2つのフォントにより、2018年流行間違いなし？のフォントになります！
設定方法
こちらの「Noto Sans Japanese」と「Lato」をfont-familyとして設定する方法は
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">この<link>タグを<head>内で読み込みます。
※こちらのlinkはGoogle Fonts + 日本語早期アクセスなので、正規版が出ましたらそちらをお使いください。
次にcss内で反映したいセレクターに対して、
font-family: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;を記述します。
また、読み込まれなかった場合のことも考え、他のフォントも指定してあります。
まとめ
2018年に流行すること間違い無しのfont-familyの設定をご紹介しましたが、気に入って頂けましたでしょうか？
もう一度おさらい、<head>内に、
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">css内に、
font-family:'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;です！
これであなたのサイトも美しいフォントになること間違いなしです。
では、また会う日まで！
