google fonts preload でちゃんと読み込み

そうだ。Google fonts を preload しよう。

参考
https://firstlayout.net/optimize-google-fonts-with-preload/

・今回は Kosugi Maru をダウンロード
google webfonts helper

・WOFF2のみサーバーにアップロード
そしてheadタグ内のCSSの最初の方で以下を読み込み。
一応フォントへのパスは絶対パスにするほうがAMPにも対応するので良いみたい。

<link rel="preload" as="font" href="/fonts/kosugi-maru-v3-japanese_latin-regular.woff2" crossorigin>

フォント使うようにCSS設定。

        @font-face {
            font-display: swap;
            font-family: 'Kosugi Maru';
            font-style: normal;
            font-weight: 400;
            src: local('Kosugi Maru'), local('KosugiMaru-Regular'),
            url('/fonts/kosugi-maru-v3-japanese_latin-regular.woff2') format('woff2');
        }

body {
      font-family: 'Kosugi Maru', sans-serif;
     }

これでOK!