Google Fontsにfont-display: swapを設定する方法【webフォント】

    みなさんGoogle Fontsを使ってますか? 僕はwebフォントはGoogle Fonts一択だと思うくらい使ってます!

    しかし今まではfont-display: swapを設定するのが今までは少々面倒でした。 最近font-display: swapが公式対応しましたのでその設定方法をご紹介します!

    目次

    Google Fontsにfont-display: swapを設定する方法

    設定方法はとても簡単です!
    以下のようにフォントurlの最後にパラメーターで&display=swapを追加するだけです!

    linkタグ

    <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">

    @import

    @import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

    ※&display=swapを追加しなくてもGoogle Fontsを選択する画面で最初から追加されています。

    Google Fonts

    まとめ

    いままでは自力でなんとか追加するしかなかったfont-display: swapもついに公式対応しました。
    サイトのデザインによってはfont-display: swapをしない方がいい場合もありますので必要に応じて使い分けましょう!