loading_logo

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

2019.06.19
スポンサーリンク

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フォントとして使用されているサイトも多くみられます。

料金無料
使用方法フォント名の横にある ＋ ボタンをクリックし、生成されたlinkコードをhtmlにコピペするだけ

Adobe Fonts

Adobe Fonts
Adobe Fonts partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and...
fonts.adobe.com

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

料金980円/月〜（フォトプラン使用の場合）
使用方法設定方法 + JavaScript API

FONTPLUS

Webフォント・サービス FONTPLUS ｜ ためし書き
「Webフォント・サービス FONTPLUS ためし書き」は、FONTPLUSが提供する豊富なWebフォントを「選んで」「変えて」「共有して」と、無料であれこれ試せるサービスです。
fontplus.jp

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

料金1080円/月〜（PVに応じて課金）／料金プラン
使用方法設定方法・JavaScript API

TypeSquare（モリサワ）

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

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

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

料金モリサワパスポートにを契約している場合、1,000万PV/年まで使用可能　プラン
使用方法設定方法・JavaScript API
レンタルサーバー以下のサーバーはTypeSquareが使用できます。
エックスサーバー
さくらレンタルサーバ
カゴヤ・ジャパン
お名前.comレンタルサーバー
wpXレンタルサーバー
ConoHa WING
※1 契約につき 1 ドメインまで。月間 2.5 万 PV まで配信可。

M+ FONTS

M+ FONTS
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タグ閉じの直前に記載してください

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

スポンサーリンク

COMMENT