Fira SansのWebフォント

Firefox OSに採用されているオープンソースのFira SansのWebフォントがMozillaのGitHub Pages経由で配信されていることを知った。ちょっと前までGitHub Pagesはパフォーマンスに難があったけど、最近大幅に改善されたので、Fira Sansをウェブページで使いたい場合はこれを直接読み込めば良さそう。

Demo: Fira

CSSは全部入りのが用意されてるので、それを使うと簡単だけど、HTTPリクエストが増える。そのため以下のように必要なだけ直接@font-faceルールを自分で書く方が良い。

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Fira Sans"),
    local("FiraSans-Regular"),
    url("http://mozilla.github.io/Fira/woff/FiraSans-Regular.woff") format("woff");
}

@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  src: local("Fira Mono"),
    local("FiraMono-Regular"),
    url("http://mozilla.github.io/Fira/woff/FiraMono-Regular.woff") format("woff");
}

Google Fontsと違って固定URLでフォントが配信されているので、メンテナンス不要。Fira Monoもあるのでセットで使うとより良さそう。

メイリオとの相性だとSource Sans Proの方が若干良いと思うけど、大体は良好な読みやすさ。コストなしで利用できるサンセリフのフォントとしてはトップクラスなので、去年Source Sans Pro使うページが増えたように、今年はFira Sans使うページが増えそうな気もする。