これだけは覚えたい！ Webフォントの基本知識
Webフォントの基本知識。実は気を付いけなくてはいけないことがたくさんあります！
今回はそのご紹介をしていきたいと思います。
1. 画像フォントとデバイスフォント
Webサイトで使われる⽂字の種類は２種類
①画像フォント
Photoshopなどで作成された画像形式の⽂字。画像ファイルなので、閲覧環境に左右されず同じ見た目で⾒せることが可能です。
赤い囲みの部分は、「画像ファイル」として作成されています。
②デバイスフォント
Webサイトを⾒ている⼈それぞれのデバイスにインストールされているフォントで表⽰。デバイスが違えば、⾒た⽬も違っている可能性があります。
青く選択できているため、打たれているテキストだということが分かります。
画像フォントとデバイスフォントのメリットとデメリット
画像フォント | デバイスフォント | |
|---|---|---|
メリット | デザインの自由度が高く、デバイスが変わっても見た目が変わらない。 | 表示速度が速く、SEO効果が高い。内容の修正も容易。 |
デメリット | 画像が多いと表示速度が遅くなる。内容の修正に手間がかかる。 | デザインの自由度が低い。デバイスのフォント環境に表示が左右される。 |
SEO効果
検索エンジンでキーワードが検索された際に、自社サイトが上位に表示されるようにする施策を行った結果の効果
デバイスフォントは上記以外にも、テキストをコピペできる、CSSで装飾できる、レスポンシブにしやすい、高精細ディスプレイ対応がしやすい、などメリットが多くあります。
CSSでのフォント指定①
デバイスフォントの指定は、CSSのfont-familyプロパティで指定します。
font-familyプロパティには、「フォントファミリー名」か、「総称フォント名」のいずれかを指定します。
body {
font-family: `Noto Sans JP`,`Helvetica Neue`,`Lucida Grande`,`Hiragino Kaku Gohtic Pro`,`ヒラギノ角ゴ Pro W3`,Meiryo,`メイリオ`,sans-serif;
}複数のフォントを指定した場合、前に書いたフォントから優先的に適⽤されます。
body {
font-family: "游ゴシック【優先度①】","メイリオ【優先度②】","MSゴシック【優先度③】";
}各OS表⽰⽤に複数のフォント名を指定しておくことが推奨されています。
（Windows表示用のフォントと、macOS・iOS表示用のフォントを用意しておくことで、OSごとの搭載フォントの影響で想定したものとは違うフォントで表示されてしまう問題が解消されるため）
body {
font-family: "游ゴシック【Windows表示用フォント】","ヒラギノ角ゴ ProN【macOS、iOS表示用フォント】";
}CSSでのフォント指定②
以下の例のように、英語部分（半⾓英数字）に欧⽂フォント、⽇本語部分は⽇本語フォントを指定したい場合があると思います。
この場合のfont-familyの指定⽅法は、欧⽂フォント名を⽇本語フォント名よりも先に指定することで実現できます。
.contents {font-family: "欧文フォント", "日本語フォント", sans-serif;}でも、欧文フォントで一般ユーザーのPCやスマートフォンにインストールされていないものもあるのでは……？ ちゃんと表示できるの…？ という疑問が浮かぶかもしれません。
2. Webフォントを利用すれば、ユーザーのフォント環境に依存しない！
Webフォントとは？
WebフォントとはWebサーバー等に置かれたフォントで、それを読み込ませてサイトに表⽰させることができます。
サーバー上のフォントファイルを参照するため、デバイスやOSに依存しないフォント表⽰が可能になります。
デバイスフォントとWebフォントの分類
デバイスフォント | Webフォント |
|---|---|
PCやスマートフォンなどデバイスにインストールされているフォント | Webサーバー等に置かれたフォント |
①デバイスに初めからインストールされているフォント | ③外部のWebフォントサービスが提供するフォント |
②ユーザーが個別にインストールしたフォント | ④ユーザーが自分でサーバーにアップしたWebフォント |
外部のWebフォントサービスの代表例
フォント名 | Google Fonts | Adobe Fonts | TypeSquare | FONTPLUS |
|---|---|---|---|---|
提供 | Adobe | モリサワ | Monotype | |
料金 | 無料で受託案件でも利⽤可能。 | 有料アカウントだと種類豊富。無料アカウントでもある程度利⽤可能。 | 有料（1,000PV/月の無料プランあり） | 有料（トライアルプランあり） |
概要 | 欧⽂フォントや、Androidで明朝体を表⽰させたい時など便利。⽇本語フォントを利⽤する場合は読み込み速度の問題に注意。（サブセット化も可能だが⼿間がかかる。） | 再販不可のため、受託案件では使⽤できない。 | モリサワの有名フォントに対応。ドメイン数やPV数、書体数に応じた料⾦プラン。サブセット化などで表⽰を⾼速化。 | フォントワークスやMonotype、有名欧⽂フォントに対応。PV上限設定プランや、⼤規模サイトプランなどあり。サブセット化などで表示を⾼速化。 |
Webフォント利⽤の主な注意点
費⽤が発⽣する
GoogleフォントやAdobeフォントをはじめ、主要サービスのほとんどが無料で使えますが、有料の場合もあります。
従量課⾦（PV数依存）のサービスの場合、⾒られれば⾒られるほど費⽤がかかる仕組みになっています。
また、契約更新を忘れるといつの間にかデバイスフォント表⽰に置き換わっているということもあり得ます。
ブラウザやOSによって、テキストの表⽰位置が異なる場合がある
フォントによっては、⽂字のベースラインがずれてしまうことがあります。
また、和欧混植する場合、サイズやベースラインまでの細かい調整はできないので、美しく整えることができません。
フォントデータが重く、表⽰速度が遅い
和⽂は欧⽂などに⽐べ⽂字量が多く、フォントデータが⾮常に重いため、ページの読み込みが遅くなるというデメリットがあります。
特に⽇本語フォントは1ウエイトごとのファイルサイズも⼤きいので、使⽤するウエイトを絞るなども重要です。
表⽰速度の差で離脱率が⼤きくなるサイトでは注意が必要です。
まとめ
WebフォントはWebデザインの幅を広げるのにとっても便利です！
費用や技術面なども考慮しながら上手に利用することで、より魅力的なWebサイトをデザインしていきたいですね。
この記事を書いた人
