webサイトにおいてフォントは、色々な意味で重要です。より多様な表現が出来るメリットはありますが、ファイルの容量が大きくパフォーマンス面の懸念もあります。
この記事ではwebフォントの基礎知識から Google Fontsの具体的な導入方法まで紹介します。
👇 メンターやってます 👇
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。
Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。
👆 無料でプレゼント 👆
この記事の目次
webデザインにおけるフォントの基礎知識
導入方法の前に、まずはwebデザインにおけるフォントの基礎について説明します。
- デバイスフォントを使う
- webフォントを使う
webサイトで表示するフォントは、上の2通りがあります。
デバイスフォントとは
デバイスフォントとは、PCやSPにインストールされているフォントのことです。PCやSPを買った時に元々入っていたフォントと、自分で入れたフォントがあります。
デバイスフォントは使っているPCやSPによって様々です。CSSであるフォントを指定しても、サイト閲覧者の環境に、そのフォントがなければ代わりのものが表示されます。従って、ユーザーの環境によって差異が生じます。
CSSでどんな指定をしても、全ての環境で完全一致させることは難しいので、なるべく差異がないような指定にするのが良いです。
webフォントとは
webフォントとはサーバーに用意（アップロード）しておくフォントのことです。画像やCSSファイルと同じように自分のサーバーに置いて使う方法と、webフォントサービスのCDNを使う方法があります。
webフォントの場合、デバイスフォントと違い、サイト閲覧者の環境に依存せずに、指定したフォントを表示することが出来ます。
最近はwebフォントを使うことは一般的になり、多くのサイトで使っていますが、注意点もいくつかあります。
webフォントのメリットデメリット
webフォントのメリットやデメリットを紹介します。
webフォントのメリット
- ユーザーが見ている環境に依存しない
- 使えるフォントのバリエーションが増える
- 無料のものもあり、簡単に導入出来る
- テキストの変更が楽
ユーザーが見ている環境に依存しない
前述した通り、ユーザーの閲覧環境に依存しません。特に見栄え重視のサイトではwebフォントを使うことが多いです。
使えるフォントのバリエーションが増える
Google Fontsには1000種類以上ものフォントがあります。これらを使うことで、表現のバリエーションは増えます。
無料のものもあり、簡単に導入出来る
Google Fontsは無料で使うことが出来ます。
Adobe Fontsも簡単に導入できますが、クラアントワークで使う場合は、クライアントさんもAdobeの契約(有料)が必要になります。
サーバーによってはいくつかのwebフォントが無料で使えることもあります。
テキストの変更が楽
画像を使う場合と比べてですが、テキストの変更が楽です。
- テキスト修正が入る
- 画像を作り直し
- サーバーにアップする
画像化してしまうと、修正時には上のような作業が発生します。webフォントを使っていれば、HTMLを修正するだけです。
webフォントのデメリット
- フォントファイルは容量が大きい
- 使いたいものが無料であるとは限らない
- 日本語フォントは数が少ない
※ レイアウトシフト等の影響によるSEO面でのデメリットもありますが、どれほどの影響かまだわからないので、省いています。
フォントファイルは容量が大きい
webフォントの最大のデメリットが、フォントファイルは容量が大きいことです。
デバイスフォントの場合、既にPCやSPに入っているため、容量は関係ありません。webフォントは容量が大きと、読み込みに時間がかかり、サイトパフォーマンスに悪影響です。
日本語フォントはひらがな / カタカナ / 漢字があるので、特に容量が大きくなります。
使いたいものが無料であるとは限らない
フォントによっては、無料では使えない場合もあります。有料フォントは買い切り / サブスク / PV数に応じて値段が変わるなど、様々な料金形態があります。
日本語フォントは数が少ない
日本語フォントは数が少ないです。Google Fontsも日本語フォントは、52個しかありません。(2023年2月時点)
基礎学習後...迷子になっていませんか？
Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。
転職成功者や副業・フリーランスデビューした方も出ています。
Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。
👆 無料でプレゼント 👆
webフォントの導入方法は2パターン
- ダウンロードして自分のサーバーにアップする
- web フォントサービスを使う
webフォントを導入する場合、この2通りになります。
ダウンロードして自分のサーバーにアップする
この方法はフォントファイルをダウンロードし、サーバーにアップして使う方法です。
ダウンロード出来るからといって、webフォントとして使って良いわけではありません。ライセンスには気をつけましょう。
webフォントサービスによっては、読み込み最適化がされていますが、自分のサーバーにおく場合は自分で最適化しないといけません。
webフォントサービスを使う
webフォントサービスは数多くあります。有名所のみ紹介します。
Google Fontsを使う機会が圧倒的に多いです。自分のサイトや自社のサイトでは、Adobe Fontsを使うこともあります。
Google Fontsの導入方法
Google Fonts を導入方法を紹介します。
ページの上部では、検索や絞り込みができます。
日本語フォントを使いたい時は、LanguageでJapaneseにすれば一覧で表示されます。人気順に並べたり、テキストを入れてプレビューが可能です。
使いたいフォントを選択すると、右側にheadタグ内に貼り付けるコードや CSS のfont-familyが表示されます。
<head>
...
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
...
</head>
body{
font-family: 'Noto Sans JP', sans-serif;
}
あとはそれらを貼り付けて使うだけです。
メニューの License をクリックすると、各フォントのライセンスも確認できます。使用する際は、確認しておきましょう。
また、Pairingsではそのフォントと相性が良いフォントを提案してくれるので、参考にすると良いです。
webフォントはいくつまで使って良い？
いくつまでといった決まりはありませんが、使いすぎるとサイトが重くなります。
個人的には、多くても和文フォントは最大でも1つ、欧文フォントは最大でも2つくらいが良いのではと思います。
考え方は人それぞれで、そのプロジェクトによって何が良いかは変わりますが、パフォーマンスと天秤にかけて判断すべきです。
webフォントの読み込みを最適化する方法
容量が大きいことが問題のwebフォントですが、最適化することで、容量を抑えることもできます。
また、容量が大きいが故に読み込み時にフォントがちらつくことがあります。これをFOUT(Flash of Unstyled Text)と呼びます。なるべくFOUTが起こらないように対策することもできます。
- 各webフォントサービスの配信方法
- サブセット化
- ダイナミックサブセット化
- preload
- font-display
- ハック的なやり方
これらを知ると、読み込みを最適化出来ることもあります。
基礎学習後...迷子になっていませんか？
模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。
下記のような、基礎学習後にやるべきことがわからず、迷子状態になっている方に特におすすめです
- 基礎学習後にやるべきことがわからない...
- スクール卒だけど実力不足だと感じている...
- 自分のコードが正しい書き方かわからない...
- 未経験から1人で転職できる気がしない...
- 独立するためのノウハウがない...
メンターは、全員が現役のプロです。駆け出しの方やメンターだけをやっている方はいません。
少数精鋭で運営しているため、受け入れ人数に限りがあります。本気でWeb制作業界を目指している方は、ぜひご検討ください。
Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(4期目)。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミングなど、幅広くやってます！
当メディア運営メンバーでメンターやってます！👉
詳しく見る
基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！