最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。
そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…？」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか？
この記事では「Webフォントとは」から使い方、軽量化の方法まで徹底解説していきます。
おすすめの無料Webフォントサービスもご紹介しておりますので、ぜひ最後まで読んでいってくださいね！
目次
1デバイスフォントとWebフォントとは
Webサイトで表示されるhtmlテキストには、デバイスフォントとWebフォントの大きく分けて2種類が存在します。
Webの場合はユーザーの閲覧環境（デバイス）に依存するため、環境によってフォントの表示のされ方が変わります。
閲覧環境によって変わるのがデバイスフォントです。
WindowsやMac、iPhoneなど閲覧環境によってインストールされているフォントが違うので、サイトで表示されるフォントも変わります。
左の図のように、Webサイト上では「明朝体A」を指定していても、「明朝体A」が入っていないユーザーの閲覧環境では「明朝体B」や「ゴシック体C」が代替で表示されてしまうということです。
一方、WebフォントはあらかじめWebサーバ上に置かれていたり、インターネット上で配布されているフォントデータ自体を読み込んで利用するフォントです。閲覧環境に関係なく、必ず同じフォントを適用させることができます。
右の図のように、Webフォントで「明朝体A」を指定しておけば、ユーザーのデバイスがインターネット上に置いてあるフォントデータを読み込んで表示させるため、どのデバイスで閲覧しても同じフォントで表示される仕組みです。
デバイスフォントとWebフォントについて、少し理解していただけましたでしょうか？
では次に、デバイスフォントで使われているフォントを見ていきましょう。
2デバイスフォントで使用するフォントとは
デバイスフォントは環境によってフォントが変わりますが、iOSを基準にヒラギノ角ゴで設定しておくか、Windowsを基準に游ゴシックで設定しておくことが多いです。
・Windowsのみに標準搭載されているもの
| ゴシック系 | メイリオ |
|---|---|
| 明朝系 | MS明朝 ※あまり美しくないのでまず使用しません |
・iOSのみに標準搭載されているもの
| ゴシック系 | ヒラギノ角ゴ |
|---|---|
| 明朝系 | ヒラギノ明朝 |
・Windows / iOSどちらにも標準搭載されているもの
| ゴシック系 | 游ゴシック |
|---|---|
| 明朝系 | 游明朝 |
※android端末の場合
iOSの場合はスマホも上記と同様ですが、androidの場合、上記で挙げたどのフォントも標準搭載されていません。
なのでandroid端末では基本的に「デザイン通りのフォントにはならない」と思っておきましょう。
また、知らない人も多いのですが、android端末には明朝系のフォントが一つも入っていません。
cssで明朝系を指定していてもゴシックで表示されますのでご注意ください。
3Webフォントのメリット・デメリット
デバイスフォントの場合は「必ず同じフォントが表示されるわけではない」という問題がありましたね。
それに対し、Webフォントは外部からフォントを読み込んで利用するため、閲覧環境に関わらず同じフォントを適用することができます。
ただ、そこで「じゃあ全部Webフォントにしちゃおう！」と思った方は要注意。デメリットも存在しますので、そちらを理解した上で検討しましょう！
メリット
①デザインの均一化が可能
ユーザー側の閲覧環境に左右されることなく共通のフォントを表示でき、均一のデザインを提供できます。
どの端末でも共通のフォントを表示できるため、サイト製作者側が意図するデザインで閲覧してもらえます。
②デザイン性が優れたフォントを利用できる
Webフォントには様々な種類があります。
企業やビジネスのイメージに合わせてデザイン性の高いフォントを使用することで、他社と差別化を図ることができます。
③SEOに有利
今までは、デバイスフォントで指定できない文字は画像化して表示させていました。画像にしてしまえば、どの端末でもデザイン通りに表示されるからです。
ですが、画像は文字情報として認識されないため、SEOには不利でした。
それに比べてWebフォントは、自動翻訳や音声読み上げにも対応可能なので、SEOに有益となっております。
④修正が簡単
テキストを画像データとして載せると、ちょっとした修正や運用の際の変更に手間がかかってしまいます。
レスポンシブデザインでSP用の画像も作成している場合は尚更です。
一方、Webフォントはhtmlの修正と同じように文字を変更できるため、スムーズ且つスピーディーに修正が可能です。
デメリット
①使用する種類が増えるほど読み込みが重くなる
Webフォントはデータを読み込む必要があるため、ある程度表示されるまでに時間がかかります。
ですので、Webフォントを使用している箇所や種類が多くなれば多くなるほど、速度が遅くなる可能性が高くなります。
文字数の少ない英語フォントであればそれほど気にしなくて大丈夫ですが、日本語Webフォントの場合は非常に重いので注意が必要です。
PageSpeedInsightsにも影響してしまいますので、重いデータを読み込んでもらってでも使うべきなのか、という点をよく検討しましょう。
②ライセンス確認など多少手間が増える
Webフォントの種類によっては有料のものがあり、使用する場合は費用が発生します。
無料で使用できるものでも場合によってはライセンスの規定がありますので、しっかりと確認が必要です。
③IEで文字がずれる
フォントによっては、IEで表示した際にベースラインがずれる現象が起こる場合があります。
その場合は以下のどちらかの対応が必要です。
・IEのみ、font-familyをメイリオなどの問題の出ないフォントに変更する。
・IEのみ、文字ずれが目立つ部分の padding などを一つずつcssで調整する。（こちらは手間がかかります）
4日本語Webフォント使用の注意点
英語のWebフォントは種類が豊富ですが、日本語Webフォントは数も少なく普及もかなり遅れていました。
それはなぜかというと、日本語はひらがな・カタカナ・漢字など文字の種類が極端に多いため、用意しなければならないフォントデータが膨大だからです。そのため、フォントデータの容量がかなり大きなものになっていました。
最近では技術の向上で、Webフォントの容量の問題が解決されてきていますが、まだまだフォントデータは重たいものが多いので、むやみに使いすぎると、ロードが長い重たいサイトになってしまいます。
表示速度が遅くなることにより、表示されるまでの間代替テキストが表示され、見栄えが悪くなり、あまり良い印象を与えない…なんてことが起きてしまうかもしれません。
日本語Webフォントは軽量化しよう！
日本語Webフォントデータは重たいとお伝えしましたが、その膨大なデータの中には日常生活でほぼ使用しない漢字なども多く含まれています。
ですので、日本語Webフォントを使用する際は、普通は使わないと思われる文字を除いて軽量化（サブセット化）するのがおすすめです。
詳しくは「5. 日本語Webフォントを軽量化する方法」をご覧ください。
サブセット化とは、フォントの中に含まれている文字の中から、必要なものだけを抜き出してファイルサイズを小さくする事です。
または、見出しなどの部分的なパーツにしかWebフォントを使用していない場合は、サイト内で使用している文字だけに絞って軽量化（サブセット化）するという手もあります。
ただし、あとでサイトを更新して新しい文字が出てくるとそこだけ違うフォントが当たってしまうという事態が起きるため、日本語Webフォントをあてたい文字が今後も頻繁に更新される場合にはおすすめできません。
サイト内で使われている文字だけを抽出してサブセット化する方法に関しては以下サイトをご覧ください。
◆参考：Webフォントで必要な文字だけ抽出する方法
5日本語Webフォントを軽量化する方法
上記でも触れましたが、日本語Webフォントはサブセット化して使用しましょう。
それでは、やり方をご紹介していきます。
ここでは「使用頻度の低い漢字を除く」という方針で、「第一水準漢字 + 記号 + ローマ字 + カタカナ + ひらがな」のみに絞ってみます。
手順① 以下ソフトと、お好みのフォントをインストールする
サブセットフォントメーカー※ Win・Mac両対応です。
WOFFコンバーター※ Win・Mac両対応です。
お好きなWebフォント
Webフォントに使用されるファイル形式は、以下の5種類です
ttf (TrueType) 一般的なフォント形式 otf (Open Type Font) ttfと比べ、文字数が多く、多機能なフォント形式 woff (Web Open Font Format) Webフォント用に開発されたフォント形式。otfやttfを圧縮して作成している。 eot (Embedded Open Type) IEでの表示用に使用するファイル形式 svg (Scalable Vector Graphics Font) SVGを利用したフォント形式 通常であれば、ttfまたはotf、woff、そしてeotを用意すれば事足りるでしょう。
手順② サブセット化する
まずはサブセットフォントメーカーを使用して、ファイルサイズを小さくします。
フォントに格納する文字（第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな）は【サブセット化 格納 文字】などで検索すると出てきます。
以下サイトのように、まとめてくださっているサイトもいくつかありますので、コピペして貼り付けてください。
◆参考：サブセット化で日本語Webフォントの容量を軽量化する方法
手順④ ファイル形式を「.woff」「.eot」に変換
「作成後、WOFFコンバーターを起動する」にチェックを入れているので、自動的にWOFFコンバーターが起動します。
「変換開始」ボタンをクリックすれば軽量化したフォントファイルが「.woff」といったファイル形式に変換されます。
「EOTファイルを生成する」にチェックを入れると、「.woff」ファイルと、InternetExplorerで表示させるためのフォントファイル「.eot」ファイルが作成されます。
以上で、サブセット化は完了です！
続いて、この作成したフォントファイルをcssで読み込む書き方について説明します。
6cssでWebフォントを指定する@font-faceの書き方
Webフォントを使用するには、まずcssの@font-faceでフォントを指定する必要があります。
@font-faceを記述し、フォントファイルを指定して、任意のフォント名を付けていきましょう。
[css]
1 2 3 4 5 6 | @font-face { font-family: '任意のフォント名'; //好きな名前を設定します。 src: url('フォントファイルへのパス') format('フォントの形式'); } |
@font-faceの実際の記述例
1 2 3 4 5 6 7 8 9 10 | @font-face { font-family: 'MyFont'; src: url('../font/MyFont.woff') format('woff'); url('../font/MyFont.ttf') format('truetype'); url('../font/MyFont.otf') format("opentype"); url('../font/MyFont.eof') format("embedded-opentype"); url('../font/MyFont.svg') format('svg'); } |
上記の指定によって、’MyFont’という名前でWEBフォントが使用できるようになりましたので、
Webフォントを利用したい箇所にcssを適応させます。
[css]
1 2 3 4 5 | h1 { font-family: 'MyFont'; } |
以上で設定は完了です。
7Webフォントは基本Google Fontsから選ぶと安心
Google FontsはGoogleが提供しているWebフォントサービスです。
クラウド上に保存された大量のフォントの中から、お好きなフォントを選び設定することができます。
なんと！！すべて無料で利用可能で、商用利用にも対応しています。
サイトを見れば、必要なウェイト（太さ）の選択や、cssでの読み込みが簡単にできるようになっています。
他の配布サイトだとライセンスに気を遣いますが、そういった手間もありません。
ということで、Webフォントを利用するなら基本的にGoogle Fontsから選ぶことを推奨します！
Google Fontsはどうやって使うの？
Google Fontsの導入方法をご説明します。
htmlとcssを少し触る必要がありますが、とても簡単にできますので、ぜひ実践してみてください。
手順① まずは「Google Fonts」にアクセスし、使用したいフォントを見つける。
Google Fonts
使いたいフォントをクリックすると、フォントスタイルの一覧が表示されます。
手順② フォントのスタイルを選択する
お好みのフォントの「+ Select this style」をクリックします。
手順③ フォントの詳細設定を行う
「+ Select this style」をクリックすると、右側にウィンドウが開かれます。ここから他のスタイルも追加することができます。
日本語Webフォントは太さが何種類か用意されてますが、全種類選択すると読み込み速度が遅くなってしまうので注意が必要です。
確定したら「Embed」をクリックしてください。
手順④ html、cssにコードを貼り付ける
コピーしたlinkコードはhtmlのheadタグ内のどこかに、font-familyタグはcssに貼り付けてください。
通常はlinkの方で問題無いと思われます。
cssから読み込みたいという方は@importをクリックして表示されるコードをまるっとコピーしてcssファイルのどこかに貼りつけてください。（@charset〜のすぐ下で良いかと思います）
以上でGoogle Fontの設置は完了です！
4ステップであっという間に導入できてしまうので、ぜひ実践してみてください。
8無料で使えるWebフォントサービス
なんと！嬉しいことに無料で利用できるWebフォントサービスがいくつかあります。今回は4つご紹介します！
①Google Fonts
Google Fonts
Googleが提供しているWebフォントサービスです。
すべて無料で利用可能で、商用利用にも対応しています。
日本語Webフォント版もあります。2020年6月現在では、9種類が使用可能です。
②Adobe Fonts
Adobe Fonts
Adobe Creative Cloud のライセンスを持っていれば、自由に使用することができます。
ですが、再販不可なので個人で使用する以外の目的での使用はライセンス違反となります。
例えば、自社で受託して制作したWeサイトでWebフォントを使用することはできません。
受託制作したサイトでWebフォントを使う場合は、サイト所有者にも Adobe Creative Cloud のライセンスが必要になりますので、ご注意ください。
◆参考：【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか
③Font Squirrel
Font Squirrel
Font Squirrelは、高品質なだけではなく、商用でも無料で使用できるフォントをまとめているサイトです。
④もじでぱ
もじでぱ
会員登録をすれば無料で使用可能です。
※ 著作権フリーでも再配布禁止のフォントはたくさんあるので、ライセンス確認は必ず行ってください。
ご利用はあくまでも自己責任でお願い致します。
9有料のWebフォントサービス
続いては、有料でWebフォントを利用できるサービスのご紹介です。
①TypeSquare
TypeSquare
和文フォントで有名なサイトで、日本のフォントメーカーの「モリサワ」が提供しているサービスです。
②LETS
LETS
年間契約にてフォント導入を提供しているサイトです。複数のメーカー、高品質かつデザイン豊富なフォントがすべて使用できます。
③FONTPLUS
FONTPLUS
ソフトバンク・テクノロジーが運営しているサイトで、書体数がとても多いです。
10Webフォント用のデータが配信されていなくても、Webフォントとして使える？
このフォント使いたいのにWebフォントとして配布されていない…といったこともあるかと思います。
使用したいフォントがWebフォント用データの配布をしていなくても、商用利用可能なフリーフォント(Webフォントとして利用可能なフォント)であれば、自分でWebフォントを作成して利用することができます。
フォントのライセンス確認方法に関しては以下サイトをご覧ください。
◆参考：Webフォントとライセンス
では、やり方をご紹介します。
手順① フリーフォントを用意する。
商用利用可能なフリーフォントかしっかり確認しましょう。
手順② .woff、.eotファイルに変換する。
サブセット化と同様のソフトと、同様の手順で変換していきます。
日本語フォントの場合はフォントに格納する文字の欄に必要な文字だけを入力し、サブセット化も同時に行っていただきますが、英語フォントの場合は入力しなくて大丈夫です。
詳しくは「5. 日本語Webフォントを軽量化する方法」をご覧ください。
手順③ cssで指定し、フォントを適用させる
手順②で出力されたフォントファイルを使用し、Webフォントの設定をしていきます。
フォントの設定方法に関しては「6. cssでWebフォントを指定する@font-faceの書き方」をご覧ください。
以上、Webフォントへの変換方法でした。
Webフォント用のデータが配信されていなくても、Webフォントとして使えるだなんて、嬉しいですよね。
是非、活用してみてください！
11さいごに
いかがでしたでしょうか？
GoogleFontは初心者の方でも簡単に設置できるので、ぜひ試してみていただきたいです。
実際にWebサイトを実装してみると、雰囲気がガラッと変わったのでとても感動しました！
フォント次第でサイトの印象は大きく変わります。
ですが、いくらデザイン性が高くても、表示されるのが遅い…など、ユーザーに不快感を与えてしまうサイトになってしまったら非常にもったいないですよね。
Wedフォントのメリット・デメリットをしっかりと理解し、うまく活用し、印象に残るサイトを作っていきたいですね！
