WEBフォントを使うならこれは抑えておくべきポイント

WEBフォントを使うならこれは抑えておくべきポイント

WEBフォント使用時の最適な設定を考える

#185 WEBフォント設定

WEB制作

任意のフォントを使ってWEBサイトのテキストを表示させるときに使うのがWEBフォント。 昔と比べてだいぶ環境が整ってきましたが、日本語環境ではいろいろと抑えておくべきポイントがあります。 現時点でのベストな設定方法を体験談から考察しました。

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ
string(24) "/blog/web/html/web_font/" NULL

WEBフォントを使うときの正解を探る

WEBサイトの表示でフォントを指定するときにはWEBフォントを使います。

WEBフォントとは、使いたいフォントをサーバーにUPし、それをユーザーにダウンロード(自動でダウンロードされる)させて表示させる方法です。

英語だったら文字数が少ないので、そこまで問題はないのですが、日本語の場合、ひらがな、カタカナ、漢字とあり、フォントファイルが重くなり、表示速度に影響がでます。

表示速度を優先するのであれば、使わない方がいい、と言われるほどです。

WEBフォントのメリデメ
WEBフォントのメリデメ

だけどさ、使いたいわけですよ。WEBフォントを。
デフォルトのフォントじゃなくて、ちょっとこだわってます感をだしたいんですよ。
(端末に依存しないで同じフォントを表示できるというメリットがあります。)

というわけで、WEBフォントを使用する際のベストプラクティスを探りたいと思います。

あらかじめ断わっておくと、これは私の主観で正しいかどうかはわかりません。
また、時がたてばここで紹介している内容と違うことをやるかもしれません。

WEBフォントの簡単な使い方

WEBフォントの利用方法として、一番簡単なのはGoogleのCDNからWEBフォントを読み込む。
これが手軽で簡単です。

CDNから読み込む手順は、いろんなサイトで紹介されているので省きます。
参考サイトは以下。

読み込み中

CDNではなく自サーバーに設置するならサブセット化が必須

CDNではなく、自分のサーバーにWEBフォントを用意するのであれば、サブセット化という軽量化が必須です。

日本語の漢字は数が多いので、常用漢字(厳密には違うけど)以外は用意しないで、ファイルを軽量化するのがサブセット化です。

これもいろんなサイトで手順が紹介されているので省きます。
参考サイトは以下。

読み込み中

サブセット化した.otfファイルをwoffとwoff2で変換することで、
NotoSansJP-Regular.otf(4,442KB)が、
NotoSansJP-Regular.woff(404KB)
NotoSansJP-Regular.woff2(359KB)
まで減量できます。

表示速度を考慮してベストな読み込みを考える

まず、最初の選択としてCDNを使うか、自分のサーバーに設置するかの二択があります。

私は自分のサーバーにサブセット化したWEBフォントを設置しました。

自サーバーにフォントを設置するメリット

一番の理由は、フォントの表示方法を色々と設定できるようにするためです。
あとで紹介しますが、WEBフォントの呼び出し方法は色々あります。

次に、第三者サーバーから読み込むと、「今は無料だけどやっぱり有料にするわ」と言われたときにめんどくさいから。

CDNを利用すると、同じところから呼び出してるので、他のサイトで読み込んだ時にキャッシュされる、とかだったら利用価値が高いんですが、第三者サイトのWEBフォントはキャッシュされない(正確にはそのキャッシュを利用できない)ので、あまり意味がないようです。

フォントファイルのフォーマットはwoff2 & woff

WEBフォントのフォーマットは複数存在します。
ブラウザ間で使える使えないがあるためです。

最近ようやくIEが引退されたので、woff2だけで良いという情報をみたんですが、な~んかよくわからんのですが、私の環境だとwoff2だけにするとフォントが置き換わるという事象があります。

原因をずーっと調査しても全然わからないので、woff2とwoffの両方を使っています。

ちなみに環境はchorome 102.0.5005.115(Official Build(64 ビット)
なんでなんだろう。

WEBフォントをHTMLに読み込む最適解をさぐる

ようやく本題にたどり着きます。

WEBフォントを使う上で考慮すべき点は2つ。

読み込みの遅さと、フォントの置き換わりによるCLSの軽減です。

WEBフォントの読み込みを少しでも早くする

WEBフォントの読み込みを可能な限り早くするために、まずプリロードで読み込みます。

<link rel="preload" as="font" href="/font/NotoSansJP-Regular.woff2" crossorigin>
<link rel="preload" as="font" href="/font/NotoSansJP-Bold.woff2" crossorigin>

preloadしたフォントファイルをCSSよりも先に読み込ませます。

次にfont-faceでフォントの読み込み指定を書きます。

@font-face {
font-family: "NotoSansCJKjp";
font-weight: normal;
font-display: block;
src: local("Noto Sans CJK JP Regular"),
url(/font/NotoSansJP-Regular.woff2) format("woff2"),
url(/font/NotoSansJP-Regular.woff) format("woff");
}

@font-face {
font-family: "NotoSansCJKjp";
font-weight: bold;
font-display: block;
src: local("Noto Sans CJK JP Bold"),
url(/font/NotoSansJP-Bold.woff2) format("woff2"),
url(/font/NotoSansJP-Bold.woff) format("woff");
}

私のサイトでは、ウェイト違いを2つ読み込んでいます。
両方ともサブセット化してwoff2に変換してあります。

font-displayはblock、optional、swapのどれが正解か

このfont-displayの指定が悩ましい。
どれが正解とは言いずらいので、お好みになります。

font-display:swap の特徴

私は最初、「swap」を指定していました。

swapの場合、代替フォントが先に表示され、その後指定したフォントを読み込む、という挙動になります。

最終的に指定フォントになるのですが、読み込まれるまで秒数にして1秒にも満たない時間ですが、目視でフォントの置き換わりが確認できます。

それが気になって、swapをやめました。

CLSも発生していたのでそれの対策も含め。

font-display:optional の特徴

swapの次に採用したのが「optional」でした。

optionalの場合、フォントの読み込みが早ければ(おおよそ100ms以下)指定フォントに置き換え、それ以上時間がかかる場合はフォントの置き換えをしません。

これでCLSはほぼ起きないようになるのですが、フォントが変わってしまうことで、line-hightの扱い方が変わってしまいました。

指定フォントとデフォルトフォントで期待する行間に差異があるようで、簡単に言うと文字が読みづらくなってしまうというデメリットが発生。

フォントがキャッシュされる2ページ目以降では特に問題ないわけですが、多くのユーザーは1ページ目で離脱することを考えると、あんまりよろしくないなぁと。

文章が読みづらいってことが、離脱の原因にもなりうるので。

font-display:block の特徴

最終的にたどり着いたのが、「block」です。

blockの場合、フォントのダウンロードができれば、必ず指定フォントで表示します。

サブセット化されたフォントは400KB位なので、そんなに時間かからないし、CLSも発生しないのでこれでいいかなと。

font-displayはシーンによって使い分けるのがいい

CLSをどこまで気にするかと、WEBフォントの使用範囲がどこまでなのかによって使い分けるのが良いのではないかと思います。

私は全ての文字をWEBフォントで指定してるので、blockにしました。

WEBフォント使わないのが一番だという意見も大いに賛成できます。

ただ、「使わない」のと、「使ったことがない」では自分の経験値が変わってくるので、私はこの自分のサイトで色々実験をしています。

結局WEBフォントってどうなの?

個人的には使わなくていいなら使わないのが一番です。

サブセット作るの面倒だし、文字のちらつきが起きたり、CLSが起きたり、そこまで大きなメリットはないですし。

ただ、自分の使いたいフォントで表示させることができるので、そこは個人的に満足してます。

スマホでもPCでもマックでもウィンドウズでも同じフォントで表示されるのがいいかなと。

昔に比べると、だいぶ環境が整ってきたと思うので、今後WEBフォントが使われるシーンが増えていくのではないかと予想されます。(Good Bye IE!)

そんな時に、何を考えてどうやって使うのかの最適解、または、なぜこの方法なのか、についての指針が得られたというのが、私の感想です。

WEBフォントのメリデメ
WEBフォントのベストプラクティス(暫定版)

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

ほんとに、フォント。フォントを活かしたデザインレイアウトの本

1,834円(税込)

ほんとに、フォント。フォントを活かしたデザインレイアウトの本

見てわかる、迷わず決まるフォントのアイデア マネするだけでセンスのいいフォント 見てわかる、迷わず決まるシリーズ

990円(税込)

見てわかる、迷わず決まるフォントのアイデア マネするだけでセンスのいいフォント 見てわかる、迷わず決まるシリーズ

タイポグラフィの基本ルール ―プロに学ぶ、一生枯れない永久不滅テクニック―[デザインラボ]

1,960円(税込)

タイポグラフィの基本ルール ―プロに学ぶ、一生枯れない永久不滅テクニック―[デザインラボ]

大人女子デザイン 女性の心を動かすデザインアイデア53

1,100円(税込)

大人女子デザイン 女性の心を動かすデザインアイデア53

フォントかるた

2,640円(税込)

フォントかるた

WEBフォント設定の関連ページ

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPで作るカレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

車用スマホホルダー
1位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

PHPで作るカレンダー
3位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

MusicBeeのレイアウト変更方法
4位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

机上台
5位

机上台

机上台という机の上に設置し、モニターを置きデッドスペースになるモニターの下に空間を生み出す悪魔的発想の商品を使ってみました。

PHPを使って作るCMS
6位

PHPを使って作るCMS

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

Bluetoothイヤホンの使い方
7位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

静岡家族旅行 計画編
8位

静岡家族旅行 計画編

2018年8月20日に毎年恒例の夏の家族旅行の行き先を静岡県に決定! 静岡県の選定理由と観光名所の選定の計画について。

WEB言語紹介
9位

WEB言語紹介

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ホワイトボード
10位

ホワイトボード

100均で買えるつっぱり棒とネットを使ってホワイトボードを窓枠に設置してみました。 ホーロー製のホワイトボードがオススメ!

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

ほんとに、フォント。フォントを活かしたデザインレイアウトの本

1,834
(税込)