Hugoでフリーフォントを使用する方法

2023-07-31 Hugo

このブログはHugoで作成しています。
Hugoがどういったものかの説明はいつかしようかなと思いますが、今回はダウンロードしたttf等のフォントファイルをHugoブログに適用する方法について解説します。


1. カスタムCSSが適用できるか確認する
カスタムCSSという表現をしましたが、要するに自身で作成したCSSファイルが適用できるかを確認します。
(適用しているthemeで異なります)
下記のようなコードがthemeのhtmlファイルにあるかを見てみましょう。 コード 上記は例ですが、config.tomlのParams.MyCSSFileで指定しているファイルを適用できるという内容です。
このコードがある場合はconfig.tomlに下記のように書くとファイルを適用できます。 コード

2. 適用するCSSを作成する
適用するCSSを/static/css配下に作成します。
コード otfファイル等をsrcにする場合はformat部分も変更してください。
同ファイル内に適用したい箇所のCSSのfont-familyを指定することで、フォントの変更ができます。


まだHugoを勉強し始めたばかりですが、すんなり変更ができて凄く楽だな〜と思いました。
参考にしてもらえると嬉しいです。