Hugoでフリーフォントを適用する方法【カスタムCSSで簡単設定】

Hugoブログにダウンロードしたフォントファイル（.ttf / .otf）を適用する方法を解説します。
カスタムCSSを使えば、テーマを変えずにフォントだけ変更することができます。

この記事でわかること

• Hugoでカスタムフォントを適用する具体的な手順
• カスタムCSSの設定方法（config.toml と CSS ファイルの記述）
• 適用できるフォント形式（ttf / otf）の注意点

手順

Step 1. カスタムCSSが使えるか確認する

まず、使用しているテーマがカスタムCSSファイルを適用できる設定になっているか確認します。
テーマのHTMLファイルに以下のようなコードがあれば対応しています。

対応していれば、config.toml に次のように記述してCSSファイルを指定できます。

Step 2. カスタムCSSファイルを作成する

/static/css/ 配下に新しいCSSファイルを作成して、フォントの定義と適用箇所を記述します。

• src にはフォントファイルのパスを指定します
• .otf を使う場合は format の部分も合わせて変更してください
• font-family を適用したい要素に指定すれば反映されます

まとめ

Hugo + カスタムCSSでのフォント変更は手順がシンプルで、思ったより簡単に実現できます。
テーマのカスタムCSS対応さえ確認できれば、あとはCSSファイルを1つ作るだけです。