タイトル通り、Notionのコードブロックのフォントが見辛くて、いつもターミナルで使用している、 HackGenフォントに変更したのでメモ

StylusをChromeにインストール

Chrome拡張機能のStylusをインストール

スタイル設定（2025.06版）

  • サイト側のデザイン変更により動かなくなる場合があります。2025.06時点の設定です
  • HackGen Console NFの所を好きなフォントに置き換えて下さい

Notion

1
2
3
4
5
@-moz-document domain("notion.so") {
  .notion-code-block > div {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

Github

1
2
3
4
5
@-moz-document domain("github.com") {
  div > pre {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

Qiita

1
2
3
4
5
@-moz-document domain("qiita.com") {
  .code-frame > .highlight > pre {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

Zenn

1
2
3
4
5
@-moz-document domain("zenn.dev") {
  code {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

Stack Overflow

1
2
3
4
5
@-moz-document domain("stackoverflow.com") {
  code {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

Terraform Document

1
2
3
4
5
@-moz-document domain("terraform.io") {
  .code-wrapper-with-cp-btn > pre > code {
    font-family: "HackGen Console NF", "Droid Sans Mono", "monospace" !important;
  }
}

補足

Windows11のフォント名確認は、「設定」→「個人用設定」→「フォント」で確認できます