webサイトにおいてフォントは、色々な意味で重要です。より多様な表現が出来るメリットはありますが、ファイルの容量が大きくパフォーマンス面の懸念もあります。
この記事ではwebフォントの基礎知識から Google Fontsの具体的な導入方法まで紹介します。
👇 メンターやってます 👇
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。
👆 メンターやってます 👆
この記事の目次
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月時点)
【駆け出しの方へ】独学に限界を感じてませんか？
プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。
↓このように感じていませんか？
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業するまでの道が見えない...
そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。
スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。
👆 メンターは全員現役エンジニア 👆
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
- ハック的なやり方
これらを知ると、読み込みを最適化出来ることもあります。
独学に限界を感じていませんか？
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！
当メディア運営メンバーでメンターやってます！👉
詳しく見る
0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！