monotonicaのフォント設定

このブログのフォントを変更した記録。

背景

monotonicaではLanyonというテーマを使っていて、これは紹介ページにあるようにアルファベットの表示を前提としている。 そのせいか、このテーマで日本語を表示するとまったく衒いのない明朝体のフォントになってしまうので、少し工夫したいなという思いがあった。

フォント選定

素敵なフォント使いのひとつの理想形 ^[1] を数年前に見かけていたものの、よく調べてみると有料フォントのようだった。 まずは無料の基本プレイからはじめることにして、一旦は保留。

自分がこのブログを閲覧する環境として、OSではWindowsとiOS (iPadOS) がある。 互換性の観点からはWebフォントを使うのが良さそうだ。 Google Fontsが無料で使えるWebフォントを提供してくれているので、その中から探してみることにした。

• やわらかめのフォントとしてM PLUS 1pは良かったけど、実際に文章を表示させてみたら丸まりすぎるのが少しだけ気になった。

• Noto Sans Japaneseも良かったけど、今度は逆に直線的なのが少しだけ気になった。もうちょっとやさしい感じが欲しかった。

  • ただし、ブログのタイトルつながりでこのフォントを選ぶのもありだったかもしれない。

• 最終的にZen Kaku Gothic Newに落ち着いた。

  • StyleをRegular 400にするかMedium 500にするか悩んだけど、視認性の良さからMedium 500を選択した。

追記：フォントを選定した当時は使い慣れていたBIZ UDゴシックを使いたかったものの、Webフォントとしては利用できないようだった。（参考） その後、BIZ UDフォントがGoogle Fontsに提供されるというプレスリリースがあった。 あらためてBIZ UDゴシックをZen Kaku Gothic Newと見比べてみると、ややゴシック体の感じが強いなと感じた。 理想形 ^[1] との（主観的な）近さでいえば現状のほうがよかろう、と判断してフォント設定はそのままにしている。

HTMLとCSSに適用

リポジトリの_layoutにあるhtmlファイルと、_cssにあるcssファイルのそれらしきところを書き換えた。

• htmlにはGoogle Fontsのガイドに従って、ヘッダ部分にコードスニペットを追記した。

• cssは試行錯誤しながらフォント指定の場所を変更した。以下の2つの変更を施したと認識している：

  • グローバルでのfont-familyを指定（指定方法はGoogle Fontsのガイドに従った）

  • ローカルでのfont-family指定を削除

結果

• 表示されるフォントを変えることができた。

  • ページの読み込みにオーバーヘッドが発生するかと心配したけれど、体感としてはほとんど気にならない程度。

• Medium 500のスタイルだと行間がやや密になりすぎたので、行高さのパラメータline-heightも併せて微調整している。

• 本文のフォントは変わった一方、コードブロックのフォントがまだ変わっていない。普段のコード書きにはJetBrains Monoを使っていて、調べたらGoogle FontsでWebフォントが提供されていたのでありがたい。追って適用する。

  • Medium 500で適用済み。

• Zen Kaku Gothic NewにはGitHubリポジトリがあって、SIL Open Font Licenseの下で公開されている。ありがたく使わせていただいた。SIL Open Font Licenseについては記事 ^[2] が参考になった。