当サイトはInternet Explorerに対応しておりません。より性能のよい、下記のようなブラウザを使ってみませんか?

IE in the grave
記事一覧に戻る

Google Fontsで`font-display:swap`が使えるように!

Google Fonts を使ったとき、CSS にfont-display: swapが設定されていないために、フォントデータの読み込み中に文字が消えてしまうという問題がありました。

この問題、一筋縄ではいかなかったようで、こちらの Issueでかれこれ 2 年あまり議論されていて、ずーーとウォッチしていました。

そして本日、とうとうこの機能が実装されたようです。 使い方は簡単で、display=swapをクエリパラメータに指定するだけです。

<link
  href={
    'https://fonts.googleapis.com/css' +
    '?family=Noto+Sans+JP:400,700' +
    '&subset=japanese' +
    '&display=swap'
  }
  rel="stylesheet"
/>

特に日本語フォントを使う際は、かなり挙動が改善されそうです。これは結構嬉しい出来事でした。

profile

田村 翔太

Yuuniworks代表。島根県浜田市を拠点に活動するフルスタックエンジニアです。Python/Node.js/GoによるAPIの開発、React/Vue.js等によるSPAの開発などを行っています。

記事一覧に戻る