読者です 読者をやめる 読者になる 読者になる

Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

【はてなブログでも】無料で使える良質なWEBフォント(日本語/欧文)まとめ

デザイン ブログ

f:id:life-is-bitter:20160412185627j:plain

CSSを少しいじることができる人ならすぐに導入できるWEBフォント。WordPressはもちろん、割と設定できるところの少ない(と私は感じています…)はてなブログでも簡単に設定することができます。WEBフォントを導入するとどのデバイスからでも統一された書体で表示されるので、サイトの雰囲気を壊さずに済んだり、サイト名やロゴを画像ではなくテキストにできるからSEO対策にも良いのはうれしいですよね。

WEBフォントを導入する上で具体的な方法はこちらが図の解説入りでよくわかります。基本的にはどこのファウンドリーもCSSにコードをペッと貼るだけなのでとても親切ですね。そして今回は、無料で使えて、かつ良質なWEBフォントを提供しているファウンドリーをピックアップしました。WEBフォントに関してまとめてあるページはいろいろあるんですけど、どこも適当すぎるというか実用的にどうなの…というものばかり上げていたので、参考になればと思います。

WEBフォントを提供しているファウンドリー

無料でWEBフォントを提供している各ファウンドリーの特徴をみていきましょう。無条件のところから条件付きのところまであるので注意です。

Google Fonts

f:id:life-is-bitter:20160412192156p:plain

言わずと知れたGoogle Fonts。商用・非商用問わずに無償で利用できるにもかかわらず、そのストックの多さと表示速度の速さには目を見張るものがあります。様々なフォントがあるので自分のイメージと合うものと見つかりやすいが、逆にいえば見つけるのが少々面倒。Google Fontsは欧文が中心ですが、最近ではNoto Sans Japaneseの日本語フォントも使えるようになったようでこれはうれしいですね。詳しくは以下のサイトが参考になります。

Adobe Typekit

f:id:life-is-bitter:20160412192720p:plain

TypekitはAdobe Creative Cloudユーザー向けのサービス。WEBとデスクトップでAdobeから提供されるフォントを自由に利用できます。2015年10月にモリサワと提携をしたため、モリサワ書体およびタイプバンク書体の良質な日本語フォントを利用できる点はかなりのメリットです。本来、Creative Cloudを契約しているユーザーへ提供しているものなのですが、以下の条件で無料プランもあります。

  • 940個以上のフォントから選択
  • 25,000ページビュー/月
  • 1つの Web サイト
  • 2個のファミリー / Web サイト

ページビューが多いサイトではなかなか厳しいですが、商用利用が可能で良質な日本語フォントを無料で使えるのはありがたいですね。ちなみにこのサイトでも記事タイトル部分にTypekitを導入しています。

TypeSquare

f:id:life-is-bitter:20160412194636p:plain

モリサワのWebフォントサービスです。デザイナーからすると質のいい日本語フォントと言えばフォントワークスと並んでモリサワ、というイメージがありますが、そんなモリサワの日本語フォントも無料で使えてしまいます。条件は以下になります。

  • 10,000ページビュー/月
  • 利用可能書体数は1つ
  • 利用可能ドメイン数は1つ

Adobe Typekit以上に無料で利用できる条件は厳しいのですが、やはりその豊富な種類とウェイト数で700以上の日本語フォントが利用できるのは大きいです。さすが。きれいな明朝体を導入したい場合はここがダントツでおすすめです。

Font.com

f:id:life-is-bitter:20160412202215p:plain

世界最大手のMonotypeのサービスです。無料プランの条件はこちら。

  • 使用可能なWebフォントは3000個
  • 25,000ページビュー/月
  • 2プロジェクト(ドメイン)まで
  • バッチ広告あり

Fonts.comは主に欧文書体がメイン。Google Fontsも十分に種類はあるのですが、それを上回る種類かつ良質であるのでページビューをクリアできるならこちらも十分にアリだと思います。ちなみに月10ドルの課金をすれば使用できるフォントは40,000個にまで増え、HelveticaやDIN Next、日本語に至ってはAXISも使えたりします。もしWEBフォントに課金をするならここが一番コスパがいい気がします。

M+

f:id:life-is-bitter:20160412203944p:plain

Google Fontsのように自由なライセンスで使用できる日本語フォント。Noto Sans Japaneseと並んで安定感があります。サイト内に詳しい導入方法も書かれているのですぐに使えるかと思います。MacとWindowsだとデフォルトのフォント環境が違ってサイトの印象も全然違うから、bodyに指定して統一した方がいいのかなあと考えるこの頃であります。

みんなの文字®

f:id:life-is-bitter:20160412204523p:plain

読みやすさが特徴のユニバーサルデザインフォント。明朝体はWEBフォントとしては使えないようで、ゴシック体のみになります。おじいちゃんおばあちゃんにやさしい。

最後に

いかがでしたでしょうか?やはり高品質なフォントは条件が少々厳しいのですが、サイトデザインのクオリティが格段に上がると思います。ページビューが多くて無料じゃ使えないよ、でももっといいフォント使いたい!という方はFonts.comの10ドルのプランが一番コスパがいいかなと思います。

そしてこのサイトの記事タイトルにはTypekitを使って見出ゴMB31にしているのですが、何というか表示が遅い…。日本語WEBフォントのデメリットとして表示速度の遅さがありますが、これってコードの貼り方の問題なのかそれともそういうもんなのか。うーん気になる。

とにもかくにも、皆さんも良質なフォントを使って自分のサイトをぐんと良い見た目にカスタマイズしてみてはいかがでしょうか?