Google Fontsを使う時、必要な文字が少ないのに、日本語フォントをまるごと読み込むとデータ量が増え表示が少し遅くなります。
サイト名やロゴのように、使う文字が最初から決まっているなら、その文字だけを指定して読み込むことで、データ量を減らせます。
今回は、Kosugi Maruを使って「東京デパート」の文字だけを読み込む方法を紹介します。
なぜ文字を限定すると軽量化できるのか
通常の日本語Webフォントは、収録文字数が多くなりやすいため、ファイルサイズも大きくなりがちです。
そこでGoogle Fontsのtext=を使うと、必要な文字だけを含む形でフォントを取得できるため、未使用のフォントを読み込むことなくデータサイズが大幅に少なくすることが出来ます。
たとえば、サイトタイトルが「東京デパート」だけなら、その文字に必要な分だけを読み込ませることができます。
この方法は、本文全体に使うフォントというより、ロゴ、サイト名、短い見出しのような限定用途に向いています。
いちばん簡単な方法はtext=を使うこと
family=でフォント名を指定し、text=の後ろに使いたい文字を入れます。実際のURLでは、日本語部分はURLエンコードして組み込みます。
今回の例では、Kosugi Maruフォントで「東京デパート」の文字だけで読み込みます。
HTML
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&text=%E6%9D%B1%E4%BA%AC%E3%83%87%E3%83%91%E3%83%BC%E3%83%88&display=swap" rel="stylesheet">
CSS
.site-title {
font-family: "Kosugi Maru", sans-serif;
}
HTML
<h1 class="site-title">東京デパート</h1>
この書き方なら、Kosugi Maruの全フォントではなく、「東京デパート」に必要な文字だけをリクエストできます。
文字のエンコード方法
いちばん簡単なのは、ChromeやEdgeの開発者ツールのConsoleで変換する方法です。
F12キーを押す
ChromeやEdgeで適当なページを開いた状態で、F12を押します。
「Console」を開く
上のタブにあるConsoleをクリックします。日本語表示だと「コンソール」になっていることもあります。
>
の部分でクリックして、encodeURIComponent(“東京デパート”)と入力してEnterを押します。すると、下にこう出ます。
%E6%9D%B1%E4%BA%AC%E3%83%87%E3%83%91%E3%83%BC%E3%83%88
これを、そのままtext=の後ろに入れればOKです。
文字そのままでも書ける？
説明用としては、次のように文字そのままで書かれることもあります。
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&text=東京デパート&display=swap" rel="stylesheet">
ただし、実際にはURLエンコードした形のほうが安全です。
日本語を含むURLは環境によって扱いがぶれることがあるため、公開用のコードではエンコード済みのURLを使ったほうが安心です。
あとで別の文字を使いたくなったらどうする？
この方法には分かりやすい注意点があります。
text=で「東京デパート」だけを指定した場合、それ以外の文字はそのフォントで表示できません。
たとえばあとから「営業時間」や「アクセス」も同じフォントで表示したくなったら、その文字もtext=へ追加する必要があります。
つまり、text=はとても軽くしやすい反面、使う文字が増えるたびに見直しが必要です。
逆に言うと、使う文字が固定されているサイト名やロゴにはぴったりです。
unicode-rangeとの違い
似た話でunicode-rangeという指定もあります。
これは@font-faceで、どの文字範囲を対象にするかを指定する仕組みです。
ただ、今回のように「東京デパート」の文字だけを読み込みたいという目的なら、unicode-rangeよりもGoogle Fontsのtext=のほうが向いています。
unicode-rangeは文字範囲で管理する仕組み、Google Fontsのtext=は必要文字そのものを絞る仕組み、と考えると分かりやすいです。
まとめ
Google Fontsで使用する文字を限定して軽量化したいなら、text=を使うのがいちばん簡単です。
Kosugi Maruで「東京デパート」だけを表示したい場合も、必要な文字だけを指定して読み込めます。
必要な文字が固定されているなら、Webフォントは全部読み込むより、必要なぶんだけ呼ぶほうがずっと身軽です。