プログラミング用等幅フォント「Fira Code」がモダンで素敵

皆さんは普段、PCを使う上で、フォントは気にしますでしょうか。

最近は、Webフォントの登場によって、Webサイトごとに独自のフォントが表示されているのを見る機会も多くなりました。

しかしながら、Webや画像制作等の経験がない方は、あまりフォントをインストールする機会もないかもしれません。

そこで今回は、プログラマー向けに、普段使う開発環境等に導入したら良さそうな、オープンソースのフォント「Fira Code」を紹介したいと思います。

プログラミング用等幅フォント「Fira Code」

Fira Codeは、プログラミング用・コーディング用フォントで、リガチャー（合字）により、関係演算子（比較演算子）や論理演算子、アローファンクションなどを見やすくしてくれる等幅フォントです。様々なプログラミング言語に対応できるように設計・工夫されています。

具体的には以下のように変換してくれますが、リガチャーになっても表示幅は同じで、文字自体が変化しているわけではないので、コピー・ペーストしても問題ありませんし、ファイル自体が変化するわけでもありません。表示が変わるだけです。

オープンソース（OFL）で開発・提供されており、商用利用・個人利用に関わらず、無償で使用することができます。

ローカル環境で利用する場合は、コンピューターにフォントをインストールします。

まず、こちらのページからフォント本体をダウンロードします。

そして解凍後、ttfフォルダー内のフォントを選択してインストールしてください。各種OSでインストールできるはずです。できない場合は、「TTF インストール OS名」などでググってください。

Macの場合に限り、Homebrew経由でもダウンロードすることができます。

brew tap caskroom/fonts
brew cask install font-fira-code

インストールが済んだら、各種エディターのフォント設定画面で設定すれば、利用可能です。

なお、もちろんリガチャーに対応していないエディターでは利用することができません。どのエディターで利用できるかはこちらに記載があります。

詳しいフォントの説明や、各種対応エディターの設定方法についてはこちらに記載されています。

このFira Code、Webフォントとしてすぐに利用できるように、各種ファイル形式が既に用意されています。

Webフォントとして導入したい場合は、下記の手順で導入しましょう。（バージョン1.204）

フォントのディレクトリ構成を変える場合は、fira_code.cssの@font-face規則内のパスも変更しましょう。

これで、以下のようにフォントを指定することで、Fira Codeフォントを表示できるようになります。

code, pre {
    font-family: 'Fira Code', monospace;
}

プログラミングでFira Codeのような特殊なフォントを導入するのは、初めは慣れが必要ですが、慣れるとリガチャー部分が一目で判別できるようになるので、人によってはデザイン面だけではなく利便性でも優れているのではないかなと思います。

世の中には様々なフォントが存在します。デザイン的に美しいフォントもあれば、Fira Codeのように可読性・利便性で有利なフォントもあります。

現在、インターネット上を探せば無料で利用できるフリーフォントも数多く存在しますので、これを機にご自身の環境のフォントを色々いじってみてはいかがでしょうか。