kanta's spike

サブセット化したWebフォントをHugoで利用したい。

解決策

1. テーマのstaticディレクトリ内にfontsディレクトリ(themes/kantas/static/fonts)を作成しWebフォントを配置する。

2. HTMLの<head/>内で、あらかじめフォントを読み込む

   <link rel="preload" href="{{ .Site.BaseURL }}/fonts/NotoSansJP-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="preload" href="{{ .Site.BaseURL }}/fonts/NotoSansJP-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   

3. CSSファイル(themes/kantas/assets/css/fonts.css)を追加し、@font-faceを定義する。 ^{1 2 3}

   @font-face {
       font-display: swap;
       font-family: Noto Sans JP;
       font-style: normal;
       font-weight: 400;
       src: local("Noto Sans JP"),url(../fonts/NotoSansJP-Regular.woff2) format("woff2")
   }
   
   @font-face {
       font-display: swap;
       font-family: Noto Sans JP;
       font-style: normal;
       font-weight: 700;
       src: local("Noto Sans JP Bold"),url(../fonts/NotoSansJP-Bold.woff2) format("woff2")
   }
   

4. fonts.cssをHTML内で読み込む

   <!-- 略 -->
   {{- $fonts_css := resources.Get "css/fonts.css" | resources.Fingerprint -}}
   <link rel="stylesheet" href="{{ $fonts_css.RelPermalink }}">
   <!-- 略 -->
   

5. Webフォントが利用されているか確認する

   1. ChromeのDevToolsで、ページのWebフォントが表示されているであろう要素を選択して、右クリックして検証を選択

   2. DevToolsのElementsタブ内のComputedタブを表示し、スクロールして一番下に表示されるRendered Fontsを確認する

      以下のように、Noto Sans JPがNetwork resourceと表示されていれば、Webフォントが利用されている。

      Noto Sans JP—Network resource(3 glyphs)
      

      もし、Network resourceではなく、Local fileと表示されている場合、Webフォントではなく、自PCにインストールされているフォントが利用されている。

参考

• @font-face - CSS: カスケーディングスタイルシート | MDN
• fontTools Docs — fontTools Documentation
• 【備忘録】Chrome DevToolsで要素に適用されているフォントを確認する方法 - Qiita
• url() - CSS: カスケーディングスタイルシート | MDN