Hugoのフォントを日本語化しました

Hugoで使用しているテーマのフォントが中国語フォント優先になってしまい、文字がガタついて見える状態になっていました。そこで、日本語フォントを優先して使用するように設定を変更しました。

対応方法は、使用中テーマの公式ドキュメントが参考になります。

公式ドキュメントには、次のように記載されています。

Create layouts/partials/head/custom.html under your Hugo site folder, with following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<style>
    /* Overwrite CSS variable */
    :root {
        --article-font-family: "Merriweather", var(--base-font-family);
    }
</style>

<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap";
    
        customFont.type = "text/css";
        customFont.rel = "stylesheet";
    
        document.head.appendChild(customFont);
    }());
</script>

この記述を参考に、layouts/partials/head/custom.html を作成し、以下のように編集しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


<style>
  /* Stackテーマの主要フォント変数を一括で上書き */
  :root {
    /* 基本文字 */
    --base-font-family: "Noto Sans JP", sans-serif;
    /* 記事本文 */
    --article-font-family: var(--base-font-family);
    /* 見出し */
    --heading-font-family: "Noto Serif JP", serif;
    /* サイドバーやウィジェット */
    --sidebar-font-family: var(--base-font-family);
    /* コード部分 */
    --code-font-family: "Fira Code", monospace;
  }
</style>

<script>
  (function () {
    const link = document.createElement('link');
    link.href = "https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&family=Fira+Code&display=swap";
    link.rel = "stylesheet";
    document.head.appendChild(link);
  })();
</script>

編集後、ビルドキャッシュをクリアして開発サーバーを再起動し、フォント設定が反映されていることを確認します。

1
2


hugo --cleanDestinationDir
hugo server

変更前：

変更後：

今回のケースでは、公式ドキュメントを見つけることができれば対応自体は簡単でした。しかし、Hugo標準の設定だけで対応しようとすると、テーマ独自のスタイル上書きが働き、思うように反映されないことが何度もありました。やはり、最初に公式ドキュメントを確認することの重要性を再認識しました。