『Webフォント』の使い方と『パフォーマンス』への影響

見た目も大事。でも、重くならない工夫も大事。

Webサイトを作るとき、「どんなフォントを使うか」って、けっこう悩みますよね。
ちょっとおしゃれなフォントを使うだけで、サイトの雰囲気がグッと良くなったり、印象がガラッと変わったりします。

そんなときに便利なのが Webフォント。
でも実は、Webフォントって見た目を良くできる半面、サイトの読み込み速度（パフォーマンス）に影響を与えることもあるんです。

このコラムでは、Webデザイナー目線ではなく
コーダーとして知っておくべきWebフォントの知識として
Webフォントってそもそも何？から、
どう使うのがベストなのか、そしてパフォーマンスとの上手な付き合い方まで、わかりやすく紹介します。

そもそもWebフォントってなに？

Webフォントとは、ユーザーのパソコンやスマホに入っていないフォントでも、Web上で表示できる仕組みのことです。
有名なのは Google Fonts や Adobe Fonts など。HTMLやCSSにちょっと書き足すだけで、誰でも簡単に使えるようになります。

たとえば「Noto Sans JP」や「Roboto」みたいな読みやすいフォントもあれば、「Kaisei Decol」や「M PLUS Rounded 1c」みたいに個性的な日本語フォントもあります。
デザインにこだわる人にとって、Webフォントはとても頼れる存在です。

でも、便利なぶん“重くなる”ことも

Webフォントを使うと、そのフォントデータを読み込むために、通信が発生します。
この読み込み時間が増えると、ページが表示されるまでに時間がかかってしまうことがあります。

たとえば：

こういった使い方をしてしまうと、数百KB〜1MB以上の読み込みが発生してしまい、スマホや通信が遅い環境では表示が遅れる原因になります。

症状として、フォントが読まれた直後のフォント変換にラグが発生しガクつきが出てしまったり、
一部のテキストでフォント未反映になってしまったりします。

パフォーマンスを落とさないWebフォントの使い方

ちょっとした工夫でWebフォントとパフォーマンス、どっちも大切にできます。
以下のポイントをおさえておくと安心です。

① ウェイトは必要な分だけにしよう

「Light」「Regular」「Bold」など、フォントには太さのバリエーション（ウェイト）があります。
でも、全部読み込む必要はありません。
見出しにBold、本文にRegularだけ使うなら、その2つだけでOKです。

読み込むウェイトが少なければ、ファイルサイズも小さくなります。

② 表示される文字だけに絞る

特に日本語フォントは、ひらがな・カタカナ・漢字・アルファベットを全部入れるとすごく重くなります。
でも最近は「サブセット化」という方法で、実際に使う文字だけにフォントを絞って読み込むこともできます。

自作のサブセットフォントを使ったり、一部のWebフォントサービスでは自動で軽量化してくれる機能もあります。

③ 先に「代替フォント」を指定しておく

Webフォントが読み込まれる前に、一時的にシステムフォント（例：sans-serif）で表示させておくと、
白い画面のまま固まる時間（＝FOIT）を減らすことができます。

font-family: 'Noto Sans JP', sans-serif;

みたいに書いておくと、Webフォントが読み込まれる前にまずsans-serif（ユーザー側にある似たフォント）が表示されるので、違和感が少なくなります。

どうしてもパフォーマンスが気になるときは…

というふうに使い分けるのもアリです。

ただ、これはデザイナーの作るデザイン次第なので、すべてがAdobeFontsなどの激重フォントでできてた場合、
ほぼ改善の余地がないのが現状です。

⚠Adobe Fontsを使うときの注意点⚠

サイト制作においてAdobeFontsを使う場合が、多々あると思いますが…
ひとつだけ大事な注意点があります。

それは、使うサイトの運営者（＝クライアント）がAdobe Fontsを使える契約を持っているかどうかです。

よくあるのが、「デザイナーさんのAdobeアカウントでフォントを指定して、そのままコーディングに使ってしまう」というパターン。
でも実は、Adobe Fontsのライセンスでは、契約者本人（もしくはその管理下のWebサイト）でしか使用できないことになっています。

つまり、もしクライアント自身がAdobe Fontsの契約を持っていない場合、
そのフォントを使ったWebサイトを公開することはライセンス違反になってしまうんです。

どうすればいいのか？

基本的には以下のどちらかを選ぶのがおすすめです。

特に後者は、無料で使える上にパフォーマンス的にも軽くて、商用利用の不安も少ないので、クライアントワークでは安心して選びやすいです。

もし、デザイナーが外部の人でクライアントがAdobeFontsを持っていないことを知らずに、
AdobeFontsで作っていて、クライアントにAdobeFontsを持っているかの確認を怠っていた場合大変なことになります。

こればっかりはコーダー側ではどうしようもできないので、クライアントにAdobeを契約してもらうか、
クライアントからデザイナーに連絡してもらいデザイン変更をかけてもらうか、もしくは見出しなどの文字が大きく出るところは画像対応にし、本文テキストなどはGooglefontやシステムフォントの中で、使われているAdobeFontsに近いものを探して使用する以外に策がありません。

これはコーダー側の責任は一切ないので、落ち着いて対応するのがベストです。

もし、クライアントがこちらに非があるような言い方をしてきた場合は

この3点を意識して適切に伝え、対処してあげてください。
すべてこちらの責任ととらえ、「すみません」などという謝罪の言葉は言わないようにしましょう。
それを言った途端に、「謝罪」＝「コーダーに非がある」という思考にクライアントは切り替わってしまい、
余計に怒りを買うことがありますからね。

見た目と速さ、どっちも大事

Webフォントは、サイトのデザインをより魅力的にしてくれる便利なツールです。
でも、使い方を間違えると、読み込みが遅くなってユーザーのストレスにつながってしまうこともあります。

だからこそ、「本当にそのフォントが必要か？」「どこに、どのくらい使うか？」をしっかり考えて、
デザインとパフォーマンスのちょうどいいバランスを見つけることが大切です。

（デザイナーが知っておくべき知識は、コーダーも知っておくべきことなのでぜひこれを機にWebフォントへの認識を正しく持ってあげてください。）