Google Fontsをサイトの一部だけで使うのであればtextパラメーターを使おう

著者
Kato83
作成日
2020/04/29 - 19:49
更新日
2023/03/02 - 01:24

なんのひねりもないです、タイトルの通り。

当サイトでもサイトヘッダーのPu10gの箇所は Google Fonts を利用しているのですが、その文字でしか使わないため、 Google Fonts の埋め込みコードは以下のようにしています。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300&display=swap&text=Pulog">

text パラメーターでサブセットの指定を手動で選択することができます。

タイポグラフィで Google Fonts を使う場合は有効な手段と言えるのではないかと思います。

日本語のWebフォントだと文字数の多さもあり、ページ表示速度を低下してしまうというイメージがあるかと思うのですが、このような使い方なら良いのではないかなと思います。

多くの場合、WebサイトまたはアプリケーションでWebフォントを使用する場合、必要な文字が事前にわかっています。これは、ロゴや見出しでWebフォントを使用しているときによく発生します。
このような場合text=は、フォントリクエストURLに値を指定することを検討してください。これにより、Googleはリクエストに最適化されたフォントファイルを返すことができます。これにより、フォントファイルのサイズが最大90%減少する場合があります。

引用元 : Google Fonts APIを使い始める| Google Developers