Google Fontsで「font-display: swap」が設定可能に! 解説+使い方まとめ

どうも、郁永(イクナガ)です。

以前、Webフォントのアドベントカレンダーで紹介した「Google Fonts」ですが……

Google Fonts
Making the web more beautiful, fast, and open through great typography

このたび、Google Fontsが font-display: swap に対応しました!  イエ~~イ!

2019.05.22追記:
5月21日にGoogle FontsのTwitterアカウントにて公式発表がありました。

font-display: swapとは?

font-displayプロパティは、「フォントが利用可能となるまでの間、テキストを表示するのかしないのか」を指定するプロパティです。

font-display: auto の場合(初期値)
「フォントを読み込むまでテキストを表示しない」

font-display: swap の場合
「フォントが利用可能になるまで代替フォント(font-familyの指定順で次に有効なフォントなど)を表示する」

といった挙動になります。

font-displayは下記のようにCSSの「@font-face」内に書くのですが、Google Fontsのようにサービス側で生成されたCSSをそのまま読み込む場合、font-displayを使うことができませんでした。

@font-face{
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* ←こんな感じ */
  src: url(path/to/font.woff2);
}

かなり強引な方法でfont-displayを設定する方法もありましたが……。)

ついに公式の機能として使えるように!

ですが GitHubに Issueが上がって3年弱、ついに公式機能としてfont-display: swap がサポートされるようになりました!

使い方も簡単。Google FontsのCSSのURLの末尾に「&display=swap」を加えるだけです!

※5月20日現在、Google Fontsで新たにフォントを選択すると「&display=swap」が動的に付与されています。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

これでfont-display: swap が有効になります。

当ブログも早速導入してみました!

文字がなかなか表示されないという現象が目立たなくなっているかと思います。


念願の機能が実装され、テンションがぶち上がりです!

Google Fontsサイコ~~!

それではまた。

タイトルとURLをコピーしました