Madogiwa Blog

主に技術系の学習メモに使っていきます。

GoogleFontsで一部のテキストだけロードして最適化する方法メモ📝

ブランドロゴ等で目立たせるためにWebフォントを利用する際に特定の文字列だけ取得して最適化する方法をメモ📝

結論

textパラメーターで利用した文字を付与してあげれば良い 📝

@import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap&text=BrandName";

補足

以下の公式ドキュメントの通り、Webフォントを取得する際のURLにtextパラメータ使用したい文字列を指定してあげれば良いようです。

フォント リクエスト URL に text= 値を指定することを検討してください。これにより、リクエストに最適なフォント ファイルを返すことができます。これにより、フォント ファイルのサイズが最大 90% 減少する場合があります。

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello

https://developers.google.com/fonts/docs/getting_started?hl=ja#optimizing_your_font_requests

私の個人のサービスではWebフォントの取得レスポンスが約45KBから約1KBほどに最適化できました🐰

参考

web-saku.net