Webにもプログラミングフォントを使おう

普通の人は気にもしないmonospace等幅フォントですが、プログラマであればエディタなどソースコードを書く前に設定する重要な要素。

例えばPHPを調べている人は、PHPを書ける、または書こうと思って目的のサイトを見ているはずです。
つまり、ソースコードを書く前の準備が終っていて、プログラミングフォントを導入している可能性が大いにあります。

技術系のサイトだとコードを公開することが多いので、役に立つはず。
適用されなくても問題なし。もし、該当のフォントを持っていたらちょっとだけ見やすくなるよ。
ささやかなユーザビリティを求めたコードが下記になります。

コード

@font-face {
  font-family: "SourceHanCodeJP-Regular";
  src: local("SourceHanCodeJP-Regular");
}
@font-face {
  font-family: "M+ 1m";
  src: local("M+ 1m");
}
@font-face {
  font-family: "Rounded M+ 1m regular";
  src: local("Rounded M+ 1m regular");
}
@font-face {
  font-family: "Rounded M+ 2m regular";
  src: local("Rounded M+ 2m regular");
}
@font-face {
  font-family: "Rounded Mgen+ 1m regular";
  src: local("Rounded Mgen+ 1m regular");
}
@font-face {
  font-family: "Rounded Mgen+ 2m regular";
  src: local("Rounded Mgen+ 2m regular");
}
@font-face {
  font-family: "Yutapon coding Regular";
  src: local("Yutapon coding Regular");
}
@font-face {
  font-family: "Myrica M";
  src: local("Myrica M");
}
@font-face {
  font-family: "MyricaM M";
  src: local("MyricaM M");
}
@font-face {
  font-family: "Ricty Diminished Discord";
  src: local("Ricty Diminished Discord");
}
@font-face {
  font-family: "Ricty Diminished";
  src: local("Ricty Diminished");
}
@font-face {
  font-family: "Migu 1M";
  src: local("Migu 1M");
}
@font-face {
  font-family: "Migu 2M";
  src: local("Migu 2M");
}
@font-face {
  font-family: "VL ゴシック";
  src: local("VL ゴシック");
}
@font-face {
  font-family: "MeiryoKe_Gothic";
  src: local("MeiryoKe_Gothic");
}

code,
kbd,
pre,
samp {
  font-family: "SourceHanCodeJP-Regular",
               "M+ 1m",
               "Rounded M+ 1m regular",
               "Rounded M+ 2m regular",
               "Rounded Mgen+ 1m regular",
               "Rounded Mgen+ 2m regular",
               "Yutapon coding Regular",
               "Myrica M",
               "MyricaM M",
               "Ricty Diminished Discord",
               "Ricty Diminished",
               "Migu 1M",
               "Migu 2M",
               "VL ゴシック",
               "MeiryoKe_Gothic",
               monospace;
}

こんな場面に有効

技術系ブログを書いていてWordPressのプラグイン「Crayon Syntax Highlighter」のようなものを使っている場合。

テーマ次第でクラスが変わりますが、コードはこのように書きます。

crayon-syntax-highlighter.css

/* @font-faceは省略 */
.crayon-font-monaco * {
  font-family: "SourceHanCodeJP-Regular",
               "M+ 1m",
               "Rounded M+ 1m regular",
               "Rounded M+ 2m regular",
               "Rounded Mgen+ 1m regular",
               "Rounded Mgen+ 2m regular",
               "Yutapon coding Regular",
               "Myrica M",
               "MyricaM M",
               "Ricty Diminished Discord",
               "Ricty Diminished",
               "Migu 1M",
               "Migu 2M",
               "VL ゴシック",
               "MeiryoKe_Gothic",
               monospace;
}

Webにプログラミングフォントが適用される理屈

簡単に言うと、閲覧者がフォント源ノ角ゴシック Code JPを持っていたら'SourceHanCodeJP-Regular'というfont-familyを作り適用します。
詳しくは以下の記事で長ったらしく書いてます。
Chromeでも読みやすい游ゴシックを指定する方法

確認済みフォント

思いつきで書きました。
その為、十分な検証を行っていません。'font-family'名が間違っている可能性があります。表示崩れなどが起こる可能性もあります。
コメントにご報告していただければ、修正します。

追記のご報告は「フォント名、'font-family'名」を記載してください。
暇があれば追記します。

確認済み

SourceHanCodeJP-Regular
https://github.com/adobe-fonts/source-han-code-jp/releases

M+ 1m
M+ 2m （表示崩れあり
https://mplus-fonts.osdn.jp/index.html

Rounded M+ 1m regular
Rounded M+ 2m regular
http://jikasei.me/font/rounded-mplus/

Rounded Mgen+ 1m regular
Rounded Mgen+ 2m regular
http://jikasei.me/font/mgenplus/

Yutapon coding Regular
http://net2.system.to/pc/font.html

未確認

Myrica M
https://myrica.estable.jp/

MyricaM M
https://myrica.estable.jp/myricamhistry/

Ricty Diminished Discord
Ricty Diminished
http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html

Migu 1M
Migu 2M
http://mix-mplus-ipa.osdn.jp/migu/

VL ゴシック
http://vlgothic.dicey.org/

MeiryoKe_Gothic
http://www.geocities.jp/meir000/meiryoKe/

問題点

@font-faceは重い処理と言われています。
がしかし、その程度の処理で重いと感じるスペックのPCをプログラミングフォントを使う人が使用しているのでしょうか？

最後に

ゴシック体：Chromeでも読みやすい游ゴシックを指定する方法
明朝体：font-familyに游明朝を使用してはいけない理由
等幅フォント：この記事
各フォントタイプについて記事を書きましたので、気になる方はご覧ください。

ちなみに私はフォントオタクではありません。
最も多用するフォントはヒラギノ角ゴとHelveticaです。