プログラミング

プログラミングフォントのおすすめ10選とエディタへの設定方法を紹介！（ターミナルも）

プログラミングフォントのおすすめ10選とエディタへの設定方法を紹介！（ターミナルも）

今回はプログラミングで使えるフォントと、フォントをエディタやターミナルに適用する方法を紹介していこうと思う。文字ってコードを書く際に必ず見るものだから気を遣っていきたいですよね。素敵なフォントに変えればちょっと気分も良いはず。

まずはフォントの紹介の前にフォントの変更方法を見ていこう。どんなフォントがあるのか知りたいっていう人は最初の方は飛ばしていってくれ。

フォントの変更方法

エディタやターミナルのフォントを変更するには、以下の流れで行うことができる。

  1. パソコンにフォントをダウンロードしてインストール
  2. インストールしたフォントをエディタやターミナルに適用する

最初からパソコンに入っているフォントをエディタやターミナルに適用することもできるけど、それ以外の良い感じのフォントはネットからダウンロードする必要がある。それをエディタなどに設定するっていう感じですね。

フォントの紹介をする前に、それぞれのエディタやターミナルでフォントの変更方法をちょっと見ていこう。

フォントをインストールする

フォントのインストール方法はいくつかあると思うけど、GoogleFontsなどからダウンロードして使うのが簡単でいいと思います。こっちでもフォントのインストールに関してはやりましたね。

GoogleFontsはいろんなフォントをパッと見ることができて検索もできるから便利。

良い感じのフォントがあったらDownload familyからそのフォントをダウンロードできる。

ダウンロードしたらttfファイルをダブルクリックして、表示される[フォントをインストール]すればOK。

フォントをエディタやターミナルに設定する

フォントをインストールしたら後は自分が使っているエディタやターミナルに設定してあげればいいだけだ。例としてVSCodeでやってみるとPreferences→SettingsからFontの項目に進むとFont Familyの設定ができる。

ここでインストールしたフォントの名前を先頭に追加してあげればそのフォントがエディタに反映される。他のエディタやターミナルに関しての設定方法はフォント紹介の後でやっていきます。

プログラミングで使えるフォント10選

フォントは大体Githubからダウンロードすることができる。それぞれのフォントを使った画像を載せてみたけど、画像見ても違いあんまり分からないですね。何か気になるフォントがあったら試してみるといいと思います。

Ricty Diminished

Ricty使っている人多そうだけどどうだろう。綺麗に文字が表示されていますね。Githubからダウンロードできますよ。

HackGen

HackGenはRicty にインスパイアされて作られたフォント。HackGen-Regularを適用すると↑な感じで英文字がちょっと丸まっているような可愛らしさがある。ダウンロードはGithubから行うことができますよ。

Qiitaにフォントを作った方の記事があるから興味あったら読んでみるといいですよ。

QiitaRicty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話

Firge

Fira Mono と源真ゴシックを合成したプログラミングフォント。HackGen の姉妹フォントということでHackGenが好きな人なら好きなんじゃないだろうか。Githubからzipをダウンロードできる。

Myrica M

Myricaも有名だろうか。MyricaにはM、N、Pっていう種類があるけどMを適用するとこんな感じだ。多くの特徴をプログラミング用フォント Ricty から継承しているということだから、Ricty好きならきっと好き。

Myricaからダウンロードすることができる。

Fira Code

ちょっと柔らかい印象を文字から受けますよね。なかなか良い感じです。Githubからダウンロードできる。

Source Code Pro

ちょっと横張った文字の印象なSourceCodePro。AdobeのオープンソースのフォントだからAdobe好きな人は使ってみてもいいかもね。Githubからダウンロードできる。

Hack

割とオーソドックスな感じだろうか。柔らかくてヌメヌメした印象を受ける。Hackからダウンロード可能。

Annonymous Pro

ちょっと細い感じでなんかオシャレですよね。他で挙げたフォントから切り替えて使ってみるとかなり文字から受ける印象変わります。AnnonymousProからダウンロードできる。

Rajdhani

Rajdhaniは適用するとサイバー感のある文字を体感することができる。普通のフォントに飽きたら使ってみるとちょっと気分変わります。GoogleFontsからダウンロードできる。

Cica

HackやDejaVu Sans Mono、Rounded Mgen+などを合成して作られたプログラミング向けフォント。Githubからダウンロードできる。

【Mac】インストールしたフォントの変更方法

フォントはzipファイルで大体ダウンロードできるからそれを開いて、インストールしたいフォントファイルをダブルクリックしてインストールボタンを押せばOK。全選択してダブルクリックが便利。

これでフォントをインストールすることができる。後はエディタやターミナルにインストールしたフォントを設定してばいいだけだ。

VSCodeのフォントを変更する

SettingsからFontを設定することができる。Font FamilyにFontを入力すればOK、リアルタイムで反映される。

SublimeTextのフォントを変更する

SublimeTextの場合もPreferencesのSettingsから設定をしよう。

「User」の方に設定を書くと既存の設定を上書きすることができるよ。ここに"font_face": フォント名っていう指定をすればOK。

Atomのフォントを変更する

PreferencesからSettingsに進むとEditorの欄にFont Familyっていうのがあるから、そこの先頭に適用したいフォントを指定してあげればOK。

iTerm2のフォントを変更する

iTerm2の場合はPreferencesからProfilesに進んでTextのFontを選択してやればいい。フォントがインストールされていれば、ここにフォントが表示されるはず。

選ぶだけだから楽でいいですね。

ターミナル

標準で備わっているMacのターミナルは環境設定からフォントを変更してあげればOK。これも選択するだけ。

フォントが反映されない場合

フォントが反映されない場合エディタを再起動してみたり、違いがわかりやすいフォントを設定してみるといいです。例えば[Impact]フォントを設定してみるとかなり違いがわかるから、変更されたかどうかが一発で分かる。

まとめ

いくつかプログラミングで使えるようなフォントを見てみたけどどうだろう。フォントってかなり種類あるから好みのもの見つけるの結構大変ですよね。この記事で紹介した中で良い感じのものがあったら使ってみるといいかもしれない。

フォント変更するとちょっと気分が変わっていいですよ。