お役立ち

重いWEBフォントを軽量化！【サブセット化】

様々な環境でデザイン性のあるフォントを表示できる便利なWebフォント。

Googleからは無料で使える日本語フォントが配布されています。

ただ、データ容量の大きさから導入の際にはサイトの動作性が遅くなるデメリットも。

今回はそんなGoogleフォントを手軽に軽量化する技をご紹介します！

必要な文字を読み込ませるだけ！
たった数文字で「サブセット化」

軽量化する方法を結論から言うと必要な文字を読み込ませる「サブセット化」を行うだけ！

難しい設定は不要です。

Googleフォントを読み込んだ<head>内の<link>コードに「 &text=」を追記して使う文字を続けて記載するだけ！

<head>
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap&text=ここにテキスト入力" rel="stylesheet">
</head>

表示自体は設定前と変わりませんが、読み込み速度はこれだけで少し早くなります。

以上！手軽にGoogleフォントをサブセット化するワザのご紹介でした！

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。