最近は日本語のwebフォントが豊富になってきましたね。
仕事で使う機会も増えたので、どんなフォントが使えるのかをまとめました。
OSに最初からインストールされているフォントについて
どんなwebフォントがあるかおさえておく前に知っておきたいのが、PCなどに標準搭載されているデバイスフォント。
webフォントが反映されない場合は、そちらが優先して表示されるので、こちらもきちんと把握しておきましょう。
WindowsとMacで使える日本語の標準デバイスフォント
WindowsとMacにそれぞれ標準でインストールされている日本語フォントは複数あります。個人的におすすめするものは以下の通りです。
Mac：ヒラギノ角ゴ／ヒラギノ明朝／ヒラギノ丸ゴ／游ゴシック／游明朝
バージョンなどによっては多少異なりますが、2019年現在では上記のものがだいたいインストールされています。
※游ゴシックと游明朝は、Win8.0〜またはMac10.9〜にインストールされています。
MacとWindowsで同じフォントを表示させたい場合は、游ゴシックか游明朝を優先して指定するといいです。
ただ、游ゴシックの場合はウェイトや指定方法に少し癖があるので、気をつけてください。
AndroidとiPhoneで使える日本語の標準デバイスフォント
iPhoneとAndroidに標準インストールされている日本語フォントは以下の通り。
Android：モトヤマルベリ（〜5.1）／Noto Sans CJK JP（6.0〜）
Androidは明朝体が標準インストールされていないので、webフォントを使うしかないそうです。
また、Androidの場合、メーカーによってもだいぶ違うそうなので、Androidを考慮するなら、Webフォントを使うほうが良さそうです。
OS別のフォント一覧は、以下のサイトが参考になります。
無料で使える日本語webフォント
無料で使える日本語webフォントも増えてきたので、一覧にしてみました。
Googleフォント
M PLUS 1p / M PLUS Rounded 1c / さわらび明朝（Sawarabi Mincho） / さわらびゴシック（Sawarabi Gothic） / Noto Sans JP / Noto Sans TC / Noto Sans SC / Noto Serif JP / Noto Serif SC / Noto Serif TC / 小杉フォント（Kosugi） / 小杉丸フォント（Kosugi Maru） / はんなり明朝（Hannari） / こころ明朝（Kokoro） / ニコモジ（Nico Moji） / ニクキュウ（Nikukyu）
※小杉フォントと小杉丸フォントはGoogle Fonts公式サイトから検索してください。
webでも使えるフリーフォントを提供してるサイト
他にもたくさんあるので、探してみてください。
以下の記事など参考になりますよ。
参考）
・2019年用、日本語のフリーフォント369種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
使用サーバーの付帯機能で使えるフォント
月額利用料を支払っているような有料のレンタルサーバーでは、オプション機能としてwebフォントが使えるところもあります。
さくらサーバー、エックスサーバー、お名前.comサーバーでは、モリサワフォントを利用できるタイプスクエアのフォントの一部が利用できます。
さくらサーバーなら30種類のwebフォントが使える！
リュウミン M-KL / リュウミン R-KL / 見出ミンMA31 / A1明朝 / 新ゴ R / 新ゴ M / ゴシックMB101 B / 見出ゴMB31 / じゅん 201 / じゅん 501 / 新丸ゴ R / フォーク R / フォーク M / 丸フォーク R / 丸フォーク M / カクミン R / 解ミン 宙 B / シネマレター / トーキング / はるひ学園 / すずむし / 新丸ゴ 太ライン / 正楷書CB1 / 隷書101 / UD新ゴ R / UD新ゴ M / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M / ナウ-GM / G2サンセリフ-B
エックスサーバーも30種類のwebフォントが使えます
リュウミン R-KL / リュウミン B-KL / 黎ミン M / A1明朝 / 新ゴ R / 新ゴ B / ゴシックMB101 B / 見出ゴMB31 / 中ゴシックBBB / じゅん 201 / じゅん 501 / 新丸ゴ R / 丸フォーク M / フォーク M / シネマレター / はるひ学園 / G2サンセリフ-B / 那欽 / 竹 B / ぶらっしゅ / トーキング / すずむし / 新ゴ シャドウ / 教科書ICA M / 陸隷 / TB古印体 / TBUDゴシック R / TBUDゴシック E / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M
Webフォント機能について | レンタルサーバー【エックスサーバー】
お名前.com レンタルサーバーでも30種類のwebフォントが使えます
TBUD 明朝 Ｍ / A1明朝 / リュウミン M-KL / リュウミン B-KL / ゴシックMB101 L / ゴシックMB101 M / ゴシックMB101 B / 新ゴ L / 新ゴ M / 新ゴ B / 新丸ゴ L / 新丸ゴ M / 新丸ゴ B / UD新ゴ NT L / UD新ゴ NT M / UD新ゴ NT B / UD新ゴコンデンス 90 Ｌ / UD新ゴコンデンス 90 Ｍ / UD黎ミン M / UD黎ミン B / 丸フォーク R / 丸フォーク B / ぽっくる / はるひ学園 / シネマレター / G2 サンセリフ-B / 解ミン月 B / モアリア R / TBカリグラゴシック R / 新正楷書 CBSK1
モリサワWebフォント – レンタルサーバー | お名前.comレンタルサーバー
有料のwebフォントサービスを使う
無料や付帯サービスでなかなかピンとくるフォントが無いときは、有料のフォントサービスを利用するのもおすすめです。
Adobe Fonts（旧Typekit）
Adobeが運営するWEBフォントサービスです。以前はTypekitという名前でした。
Adobeサブスクリプションの契約をしている人ならだれでも利用できるので、クリエイターなら利用しやすいのでは。
日本語webフォントは100種ほど利用できます。
おすすめ書体
源ノ角ゴシック / りょうゴシック PlusN / 平成角ゴシック Std / TB新聞ゴシック Std / A-OTF 中ゴシックBBB Pr6N / A-OTF 太ゴB101 Pr6N / TA-楷Regular / 小塚明朝 Pro / りょう Text PlusN / 平成明朝 StdN / TB新聞明朝 Std / A-OTF 太ミンA101 Pr6N / 源ノ明朝 / DNP 秀英四号太かな Std / DNP 秀英初号明朝 Std / 游明朝体 Pr6 / 貂明朝 / 平成丸ゴシック Std / TBシネマ丸ゴシック Std / A-OTF じゅん Pro / TA-ことだまR / VDL ペンジェントル / VDL ペンレディ / TA香蘭 / VDL 京千社 / かづらき SP2N / Ro篠Std / 漢字タイポス４１５ Std / どんぐり かな / TA-方縦M500 / TA-candy / VDL テラＧ / VDL アドミーン / VDL ラインＧアール / VDL メガ丸 / A-OTF UD黎ミン Pr6N / A-OTF UD新丸ゴ Pr6N
FONT PLUS（フォントプラス）
フォントワークスの運営するwebフォントサービスです。モトヤフォントや白舟書体なども利用できます。
日本語webフォントは300種以上と豊富で、料金形態もわかりやすくてお手頃です。
おすすめ書体
セザンヌ Pro M / ロダンマリア Pro DB / ロダンローズ Pro B / ロダンカミーユ Pro DB / ロダン墨東 Pro DB / セザンヌ墨東 Pro M / ロダンハッピー Pro DB / ロダンカトレア Pro DB / ロダンひまわり Pro M / ロダンNTLG Pro M / ロダンわんぱく Pro DB / ロダン ProN M / ニューセザンヌ ProN M / 筑紫ゴシック Pr5N R / イワタ中ゴシック体オールド / イワタ新聞ゴシック体新がな / Gイワタ新ゴシック体M / NUDモトヤシーダ2B / 新ゴ B / iroha 31nire StdN R / 秀英角ゴシック金 L / こぶりなゴシック StdN W3 / 凸版文久ゴシック Pr6N R / Tazugane® Info StdN Light / 筑紫アンティークSゴシック Std B
マティス Pro M / マティスえれがんと Pro DB / マティスはつひやまとPro DB / マティスV Pro DB / テロップ明朝 Pro D / 筑紫明朝 Pr5 E / イワタ太明朝体 / NUDモトヤ明朝3 / 筑紫Aオールド明朝 Pr6 M / ヒラギノ明朝 ProN W3 / 丸明Kiso StdN R / 丸明Tikuma StdN R / 筑紫B明朝 Pr6 L / 秀英四号太かな / モード明朝Aラージ Std M / 凸版文久見出し明朝 Std EB / 筑紫Q明朝L Std L / 筑紫Bオールド明朝 Pr6 D / 筑紫Cオールド明朝 Pr6N B / モード明朝Bラージ Pro R
アニト Std L / スーラキャピー Pro M / 筑紫A丸ゴシック Std M / Gイワタ中丸ゴシック体 / 筑紫B丸ゴシック Std M / NUDモトヤマルベリ2B / 丸丸ゴシックASr StdN R / 秀英丸ゴシック B
グレコ Std B / 古今髭 Std EB / 万葉古印ラージ Std B / 白舟楷書（SBTH-Kaisho-R） / 白舟印相体（SBTH-Insotai-R） / 弘道軒清朝体現代版 / 白舟太行書fs / 白舟篆古印 / クレー Pro DB / 鯨海酔侯 / 忍者 / 佑字 舞 Std R / モトヤ行書3 / 京円かな太
レイルウェイ Std B / ロウディ Std EB / カラット Std UB / コメット Std B / モトヤステンシルアポロ4 / あおかね Std EB / つばめ Std R / 白舟髭隷（SBTH-HigeRei-B） / パルラムネ Std B / モトヤアラタ6
ニューシネマA Std D / モトヤ刀筆2B / モトヤ学参明朝3
イワタUDゴシックRA表示用 / F+UD-ニューロダン DB / UD角ゴ_ラージ Pr6 DB / UD角ゴ_コンデンス70 Pro M / UD角ゴ_スモール Pr6 L / イワタUD明朝RかなB / UD黎ミン M / F+UD-筑紫明朝 D / UD明朝 Pr6N M / UD新丸ゴ R / UD丸ゴ_スモール Pr6N DB / ヒラギノUD丸ゴ StdN
TypeSquare（タイプスクエア）
モリサワが運営するwebフォントサービス。
日本語webフォントの書体数は700種以上とかなり豊富です。
１書体１ドメインだけなら無料で利用することができますが、それ以上使用する場合は少々値段がはります。
自分でサーバーに設置して使う
フォントデータを利用しているサーバにアップロードして使うという方法です。
フリーフォントの中にはwebフォントとして使うことを許可していないものもあるので注意しましょう。
また、日本語のwebフォントは、漢字などを含めるとかなり重いので、表示に時間がかかる場合があります。
設置して使う場合は、許諾とサイズに注意して使ってください。
設置方法については以下のサイトが参考になると思います。
参考）
・自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース
有料のwebフォントキットもあるよ
フロップデザインがwebフォント用のフォントキットを販売しています。
収録フォントは、フロップデザインフォント、うつくし明朝体、スマートフォント、あいこ、じゅくゴシック、かんじゅくゴシックのweb用です。
詳しくは以下のサイトから。
webフォントが上手く反映されない原因は？
「webフォントを設定したのに、ちゃんと表示されない！」という場合は、以下の点を気にしてみてください。
フォントの名前指定が間違っている
MacとWindowsで若干名前が違う場合があります。半角スペースの有無も重要だったりします。
正しいフォント名を指定できてるかどうか、しっかり確認しましょう。
サービスの設定やタグが間違っている
レンタルサーバーの付帯機能やフォントサービスを使っている場合、設定が間違っていたり、タグをちゃんと埋め込んでいない場合も多いです。
ドメイン名を設定して利用するものの場合、テストサーバーのドメインだけ設定してて、本番のドメインを指定していなかった、なんてパターンもあります。
「font-weight」を指定していない
複数のwebフォントを使用している場合、文字の太さを決める「font-weight」をきちんと設定しないと、一文字だけ違うフォントになってしまうことも。
特に游ゴシックや游明朝を使うときは「font-weight」を数字でしっかり設定するようにしましょう。
＊＊＊
いかがでしたでしょうか？
半分くらい自分が使うためのメモでしたが、フォントを選ぶときの参考になれば幸いです。
