近年Web上でデバイス文字の日本語を表示する技術が格段に増えました。
中でもWebフォントは、大手レンタルサーバーやフォントメーカーなどから無料で使えるサービスが登場するなど、日本語Webフォントを導入するハードルも年々低くなってきています。
今回は日本語Webフォントを提供する無料サービスを比較しました。
比較するサービス
今回は以下の３種類のWebフォントサービスを比較しました。
さくらインターネット
大手レンタルサーバー、さくらインターネットのサーバー契約者への付帯サービス。
「さくらのレンタルサーバ」でWordpressを導入している利用者は、モリサワのWebフォントが利用できます。
Adobe Typekit
Adobe Creative Cloudユーザーが利用できるフォント提供サービス。
英語フォントがメインですが、近年モリサワのフォントも利用することができるようになりました。
Google Fonts
Googleの提供するWebフォントサービス。
2017年現在、試験的に配信されている「Google Fonts早期アクセス」で、有名ではないですが９種類の日本語フォントが導入されています。
これらのサービスは本当に使えるのか
既存のWebフォント配信サービスTypesquareと合わせて、それぞれを比較しました。
※2017年3月現在のものです。最新の情報は各サービスサイトをご参照ください。
| ◆さくらインターネット | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| １ドメイン | 2.5万PV／月 | ¥515／月〜※1 | 可 |
| 使用できるフォント | |||
| リュウミン、見出ゴBM31、A1明朝などモリサワフォント30種類 | |||
| 備考 | |||
| さくらインターネットで契約したドメイン、またはサーバーを利用すること | |||
| ◆Typekit（無料版） | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| １ドメイン | 2.5万PV／月 | ¥0 | 不可※2 |
| 使用できるフォント | |||
| モリサワ、Typebank、Adobeフォントなど日本語フォント約30種類のほか、1000種類以上の英字フォント | |||
| 備考 | |||
| CREATIVE CLOUDのアカウントが必要 | |||
| ◆Typekit（個人プラン） | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| 無制限 | 5万PV／月 | US$49.99／年 | 不可※2 |
| 使用できるフォント | |||
| 同上 | |||
| 備考 | |||
| CREATIVE CLOUDのアカウントが必要 | |||
| ◆Typekit（ビジネスプラン） | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| 無制限 | 2万PV〜／月※3 | US$40／月〜※3 | 可 |
| 使用できるフォント | |||
| 同上 | |||
| 備考 | |||
| CREATIVE CLOUDのアカウントが必要 | |||
| ◆Google Fonts | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| 無制限 | 無制限 | ¥0 | 可 |
| 使用できるフォント | |||
| Noto Sans ほか９種類の日本語フォント（一部ひらがな、カタカナのみ） | |||
| 備考 | |||
| - | |||
| ◆Typesquare※4 | |||
|---|---|---|---|
| ドメイン制限 | PV制限 | 費用 | 商用利用 |
| 2ドメイン | 25万PV | ¥2160／月 | 可 |
| 使用できるフォント | |||
| Typesquare登録フォントの中から3種類 | |||
| 備考 | |||
| - | |||
※1 スタンダードプラン利用時
※2 アカウント所持者とは異なる第三者のWebサイトに使用する場合はビジネスプランの契約が必要
※3 ビジネスプラン2M/月PVプラン利用時
※4 スタンダードIプラン利用時
まとめ
無料サービスはPV数が壁になるかも
無料で使えて便利そうな印象もありますが、さくら、TypekitなどではPV制限は2.5〜5万PVまでとなっているで、中規模サイトやメディアサイトなどPVが高いサイトへの適用は厳しいかもしれません。またライセンスの関係で制作会社などが顧客のWebサイトに適用する場合はビジネスプラン契約をする必要があるようです。
やっぱりGoogle Fontsは使い勝手がよさそう
Google Fontsで利用できる９種類のフォントは有名ではないですが、使えるフォントもありました。特にゴシック体の「M+ 1p」「Noto Sans Japanese」はウェイトも複数あり、難しい漢字にも対応しているので汎用性が高そうです。 以前このブログで紹介した「Font−familyのベストな書き方 2017年版」でもNoto Sansを使用したFont−Family例を紹介していますので、こちらもご参考ください。
おまけ
Font feature settingsってCSSプロパティ知ってました？
Webフォントとは直接関係ないですが、この「font-feature-settings」というCSSプロパティをご存知でしょうか？
私は最近知ったのですが、このCSSプロパティを使うと、プロポーショナル字形を指定することが可能になります。
簡単に言うと、文字を自動で詰めてくれるということです。（Photoshop、Illustoratorのオプティカル設定と同じですね！）
IE,Safari,Chrome,FireFoxともにかなり昔からサポートしているようです（参照）。
全ての文字を詰める（プロポーショナルに変える）
|
1 |
font-feature-settings : "palt" |
ひらがなのみ文字詰める
|
1 |
font-feature-settings : "pkna" |
すべてのフォントに適応できるわけはなく、プロポーショナルメトリクス情報が含まれていないフォントの場合は、文字詰めはできません。有名なフォントでいうと「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans Japanese」で利用できます。 （「メイリオ」などは不可）
ぜひ参考にしてみてください。
