模写修行メディア

webフォントの基礎と使い方を解説!Google Fontsの導入方法も紹介!

webフォントの基礎と使い方を解説!Google Fontsの導入方法も紹介!

この記事をシェア:

webサイトにおいてフォントは、色々な意味で重要です。より多様な表現が出来るメリットはありますが、ファイルの容量が大きくパフォーマンス面の懸念もあります。

この記事ではwebフォントの基礎知識から Google Fontsの具体的な導入方法まで紹介します。

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フォントが無料で使えることもあります。


💡 テキストの変更が楽

画像を使う場合と比べてですが、テキストの変更が楽です。

  1. テキスト修正が入る
  2. 画像を作り直し
  3. サーバーにアップする

多くのフォントを使っていると、修正時には上のような作業が発生し、工数がかかります。webフォントを使っていれば、HTMLを修正するだけです。

webフォントのデメリット

  • フォントファイルは容量が大きい
  • 使いたいものが無料であるとは限らない
  • 日本語フォントは数が少ない

※ レイアウトシフト等の影響によるSEO面でのデメリットもありますが、どれほどの影響かまだわからないので、省いています。


💡 フォントファイルは容量が大きい

webフォントの最大のデメリットが、フォントファイルは容量が大きいことです。

デバイスフォントの場合、既にPCやSPに入っているため、容量は関係ありません。webフォントは容量が大きと、読み込みに時間がかかり、サイトパフォーマンスに悪影響です。

日本語フォントはひらがな / カタカナ / 漢字があるので、特に容量が大きくなります。


💡 使いたいものが無料であるとは限らない

フォントによっては、無料では使えない場合もあります。有料フォントは買い切り / サブスク / PV数に応じて値段が変わるなど、様々な料金形態があります。


💡 日本語フォントは数が少ない

日本語フォントは数が多くはありません。

Google Fontsも日本語フォントに関しては、21個しかありません。(2021年6月時点)

webフォントの導入方法は2パターン

  1. ダウンロードして自分のサーバーにアップする
  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
  • ハック的なやり方

これらを知ると、読み込みを最適化出来ることもあります。応用的な内容になるので、もう少し検証してから、別記事で書きたいと思います。

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材