【備忘録】自分好みのフォントに変更する方法

今回のプロダクト

本ブログサイト

• Docusaurus ベースのブログサイトを cloudflare 上にデプロイする

やりたいこと

フォントがダサかったので、見やすいフォントに変更する

• LINESeedJP

フォントの変更方法

1. LINE Seed の公式ページから、 ウェブで使用するためにライセンスが適切なフォントファイルをダウンロードする（フォーマットは.woffや.woff2）
2. .woff2 ファイルを fonts ディレクトリに配置する。
   ※今回は.woff2 ファイルが静的ファイルになるので、./static/fonts内にwoff2ファイルを配置しました。
3. ./src/pages/index.module.cssに以下のコードを追加
   

@font-face {
  font-family: "LINESeedJP_OTF_Rg";
  src: url('../../static/fonts/LINESeedJP_OTF_Rg.woff2') format("woff2");
  font-weight: normal;
  font-style: normal;
}