WEBフォント使ってる？人気のフォントサービスまとめ

WEBデザインにおいてWEBフォントを使うことは、ここ最近必須になっています。また、最近はレンタルサーバーなどを借りればモリサワなどの有料フォントの使用可能で、敷居も大分下がっているんじゃないでしょうか。
CSSやJavascriptの数行を追加するのみで使用できるお手軽感もいいですね。

現在どのくらいの日本語フォントを取り扱っているWEBフォントサービスがあるのかまとめてみました。

Google Fonts

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

Google Fontsは現在日本語フォントの数はそれほど多くはないですが、欧文フォントも含めればかなりの数使用できるサービスです。無料で使用可能で、ダウンロード・インストールすればWEB以外のシーンでも使用可能です。
2018年末頃にNoto Sans JPという日本語フォントが正式サポートされ、WEBフォントとして使用されているサイトも多くみられます。

Adobe Fonts

Adobe Fonts

Adobe Fonts partners with the world’s leading type foundries to bring thousands ...

fonts.adobe.com

Adobe Creative Cloudに契約していたらWEBフォントは、サイト数やアクセス数を気にせず追加料金なしで使い放題です。
以前はAdobe Typekitというサービス名で提供されていて、アクセス数など制限がありました。
日本語フォントもかなり増えてきているので、自分は一番使用頻度が高いですね。

FONTPLUS

ホーム | Webフォント・サービス FONTPLUS

FONTPLUS（フォントプラス）は、バラエティ豊かなプロ向けのフォントが使えるWebフォントサービスです。

fontplus.jp

FONTPLUS（フォントプラス）は、ソフトバンク・テクノロジーが提供しているサービスです。
日本語フォントも多く用意されていてとっても魅力的です。フォントワークス書体を使用したいのならば是非！

TypeSquare（モリサワ）

Webフォント TypeSquare

モリサワのWebフォントサービスTypeSquareは多彩で魅力的な書体でWebサイトの表現の幅を広げます。大規模サイトや、Webサービス・Webアプリへの導入...

typesquare.com

TypeSquareは、フォントでお馴染みモリサワの定額型Webフォントサービスです。モリサワフォントはもちろん、他のフォントメーカーのフォントも使用することができるので日本語フォントはかなり多く選択が可能ですね。
モリサワパスポートに登録してる人は無料で使用できます。

またレンタルサーバーなどでもモリサワのWEBフォントが使用できるサービスがいくつかあります。自分が使用しているサーバーのサービスを今一度チェックしてみてください。

M+ FONTS

https://mplus-fonts.osdn.jp/

mplus-fonts.osdn.jp

M+ FONTSは、個人利用から商業目的での利用できる無料のフォントです。
2種類の日本語フォントと7種類の欧文フォントが使用可能です。
M+ Type-1・M+ Type-2という丸みの強いゴシックになります。

WEBフォントのデメリット

WEBフォントを使用する上で、デメリットもちゃんと把握しておきましょう。

WEBフォントはサイト読み込み時にフォントデータを読み込むため、読み込み完了までは別のフォントで表示されてしまいます。特に日本語フォントは文字数も多いので、ファイルサイズが大きく欧文フォントよりも読み込みに時間がかかることが多いです。
ネット環境が低速の場合も考慮するのであれば、使用を控えた方がいい場合もありそうですね。

またこの読み込み時のタイムラグの影響で、文字幅の変更が発生することからに
サイトが一瞬ちらついて表示されているように見えます。
これには「Flash Of Unstyled Text (FOUT)」と言います。

ちらつき（FOUT）の解消法

ちなみにこのちらつきを防ぐ方法もありますので参考までに記載しておきます。
cssとjavascriptで実現可能です。

CSS

html {
  visibility: hidden;
}
html.wf-active, html.loading-delay {
  visibility: visible;
}

Javascript

setTimeout(function () {
    document.getElementsByTagName("html")[0].classList.add("loading-delay");
}, 3000);

※上記javascriptは、headタグ閉じの直前に記載してください

さらに詳しい方法がこちらに書いてありましたので、よかったらどうぞ。