お役立ち
2021.03.29
重い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フォントをサブセット化するワザのご紹介でした!
この記事に関連するタグ
正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。