WEB制作・サイト運営

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

どうも、イクナガです。

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

このたび、font-display: swap に対応しました!

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

font-display: swapとは?

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

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

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

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

font-displayは下記のようにCSSの「@font-face」内に書くのですが、

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

Google Fontsのようにサービス側で生成されたCSSをそのまま読み込む場合、font-displayを適用することができませんでした。

かなり強引な方法で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');

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

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


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

ク~、Google Fontsサイコーだぜ!

それではまた!!

-