以前は敷居の高かったリッチな日本語Webフォントですが、最近は使えるフォントの種類が増えてきて、使いやすくなってきました。
今回は、企業が提供している日本語Webフォントをご紹介します。

Google Noto Fonts

Google Noto Fonts

Googleが開発したオープンソースのファミリーフォント。
無料で利用出来る日本語Webフォントでは、老舗ではないでしょうか。

Notoの由来は、コンピューターで表示できない文字の代わりに表示される四角(□)のことを、Googleでは”豆腐”と呼んでいて、豆腐をWebから取り除く(no more tofu) ためにNotoフォントを作った、と言われています。
豆腐が語源と聞くと、少し親近感が湧きます。

日本語のNoto Fontはfont-weightが豊富で、7種類もあります。
デフォルトのフォントだと大体がRegular・boldの2種類なので、微妙な差異にこだわりたい場合には使ってみると良いかもしれません。
Noto Sans CJK JP

使い方

CSSファイルにインポート文を書く。

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

これを適用したい要素のfont-familyに記載すれば使うことができます。

    font-family: 'Noto Sans Japanese', sans-serif;
    

TypeSquare

TypeSquare

フォントといえば、モリサワ。
そのモリサワが提供しているWebフォントサービスです。
Noto Fontと同じくらいの時期にリリースされ、こちらも話題を呼びました。

さすがモリサワ、現在使用できるフォントはなんと753種類もあります！
無料プランもありますが月1万PVまで&利用可能書体が1種類のみなので、一般的なWebサイトで利用する場合は有料プラン(月2,160円〜) の方が良いでしょう。

サイトにWebフォントを埋め込んだときのイメージが知りたい時はType Square Web Font Tryoutを使うと、実際のWebでいろいろなフォントを試してみるとこができます。
弊社のblogでも試してみました。人気の”すずむし”を使ってみたら、すごくかわいい感じになりました。

Adobe Typekit

Adobe Typekit

PhotoshopやIllustratorでおなじみのAdobeでも、Webフォントを提供しています。
Adobeのフォントだけではなく、モリサワフォントなども使えます。
モリサワ モリサワグループ書体をAdobe Creative CloudのTypekitに提供開始 モリサワおよびタイプバンクの20書体

プランが3つあり、無料でも使えます。
2,180円以上のCreative Cloudを契約していれば、”ポートフォリオ”プランを無料で使用することができます。
商用利用も可能ですので、CCを契約されている方は試してみてはいかがでしょうか。

使い方

Typekitでサイトで使いたいフォントのキットを作成し、生成されたJavaScriptコードを内に埋め込みます。
※埋め込む時は type=“text/javascript” の記述を忘れずに！

あとはfont-familyに追加したり、発行されたclassをタグにつけることで、フォントを表示することができます。

さくらインターネット

さくらインターネット

サーバでお世話になることが多いさくらインターネットで、WordPress限定ですがモリサワフォントを使うことができます。
今年の6月からサービスが開始されました。
モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現

このサービスを使用できるのは、「さくらのレンタルサーバ」スタンダードプラン以上、「さくらのマネージドサーバ」のWordPressサイト。
月間2.5万PVまで無料で使用でき、中小規模のWebサイトであれば使えます。
今後は静的HTMLページや大規模サイトでも利用できるようなプランの拡充を目指している、とのことですので、今後の動きに期待しています。

9月13日(火)に大阪でイベントが開催されるようです。
「モリサワ×さくらインターネット Webフォントの夕べ in 大阪」を開催、弊社社員が登壇いたします

使い方

新規でインストールした場合は、ダッシュボードからフォントを選択できます。
すでに使用している場合は、WordPress公式サイトからプラグインをインストールすることで使用できます。

いろいろなサービスで使えるようになりつつあるWebフォント。
リッチなサイトを作る際に、試してみてはいかがでしょうか？
※2016年9月7日現在の情報です。