JetBrains Mono

最近 PhpStorm をアップデートしたら JetBrains Mono というフォントに自動的に変更された。 このフォントが特に低解像度ディスプレイで異常に見やすくて気に入って使っている。 どういう仕組みになっているのか分からないが、デフォルトだと PhpStorm のような JetBrains 製の IDE 以外で使えないので改めてフォントをダウンロードする必要があった。 JetBrains Mono 公式サイトでダウンロードできる。 そしてこのフォントは Web フォントが同梱されており自分の Web サイトやアプリで自由に使用して良いと明記されているのが素晴らしい。 早速この Blog にも Web フォント (.woff2 と .woff) を埋め込んでみた。 プログラミングコードが出現した際に使用される。

ちなみに JetBrains Mono を Web フォントとして使うには以下のような CSS を書けば良い:

// @font-face として JetBrains Mono を定義する
@font-face {
    font-family: 'JetBrains Mono';
    src: local('JetBrains Mono'),
        url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('fonts/JetBrainsMono-Regular.woff') format('woff');
}

// 使用したいところで普通に指定すればよい
div.post-content code {
    font-family: "JetBrains Mono", monospace;
}

src の指定の意味は local (ローカル PC) に JetBrains Mono が入っていたらそれを使い、無かったら woff2, woff フォーマットの順でダウンロードして使用するという意味である。 woff2 の方が新しいフォーマットで圧縮率が高いので先に指定している。