幅の狭い画面向けの等幅フォントに M+ 1m を採用

このサイトでは記事にソースコードを掲載することが多いけど、スマートフォンなど幅の狭い画面では折り返しが増えて読みづらくなってしまう。そこで幅の狭い等幅フォントに変えれば多少は読みやすくなるかと考え、M+ Fonts の M+ 1m をウェブフォントとして利用させていただくことにした。

残念ながら今のところ Google Web Fonts にはないので、Font Squirrel からダウンロードしたフォントをサーバに上げて @font-face で参照。5 つのウェイトが用意されてるけど、ここで使うのは Regular と Bold のみ。表示域の幅がある程度狭い場合にのみ適用されるよう、メディアクエリで切り替えてる。

code,
samp,
kbd {
    font-family: "Menlo", "Consolas", monospace;
}

@media screen and (max-width: 32em) {
    code,
    samp,
    kbd {
        font-family: "M+ 1m", monospace;
    }
}

結果にはかなり満足してるけど、読み込むウェブフォントが増えてきちゃったのでなんか最適化を検討します…