LoginSignup
3
4

More than 3 years have passed since last update.

@nononosuque

Fira Codeのインストールと設定メモ

Last updated at Posted at 2021-06-11

はじめに

ハンズオンに参加したときに事前設定として、フォント「Fira Code」使うといいよ！と記載されていて、実際にインストールして使ってみたところ、見やすい！かわいい！MecchaEE！と感じた(ハンズオン開催してくれた側からするときっとそこかよ的な部分だと思っている・・・）ので、自分用に環境別のインストール手順とテキストエディタの設定手順を残しておく。
といっても普通にテキストファイルをインストールするやり方です。

※インストール＆利用方法はgithubにちゃんとあります。
私がフォントあんまりインストールしないもので、また良きフォントがあったときにインストールどうやるんだっけってなりそうなので、スクショと合わせてインストール方法をまとめたメモです。

Fira Codeとは？

プログラミング用フォントで、
オープンソースのフォントなので誰でも自由に利用可能。
また合字（リガチャ）1に対応している。　

◆MSゴシックの場合（みんな大好きさくらエディタ）
image.png
◆FiraCodeの場合
丸っこくてなんか見やすい…！！
image.png

リガチャってこういうこと

リガチャはエディタによって利用可能なものと利用できないものがあります。
◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしていない）
image.png
◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしている）
image.png

インストール：Windows10の場合

github のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。
image.png
ダウンロードしたzipファイルを任意フォルダに解凍します。
image.png
解凍したフォルダに格納されている.ttf拡張子のファイルをダブルクリックします。
image.png
image.png
「印刷」と「インストール」ボタンが表示されている画面が起動するので、「インストール」を押下します。
image.png
「.ttf」ファイルを右クリックメニューの中からインストールでも可
image.png
以下でも可
Windowsの検索欄で「フォント」と入力すると表示されるフォント設定を選択後、表示されるフォントの追加欄に「.ttf」ファイルをドラッグアンドドロップでも可
image.png
image.png

インストール：Macの場合

github のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。
image.png
ダウンロードしたzipを任意のフォルダに解凍する
image.png
解凍したフォルダを開いて、ttfフォルダを開きます
image.png
中に入ってるttf拡張子のファイルを全て選択する
image.png
右クリックメニュー > このアプリケーションで開く > Font Book.appを押下する
image.png
以下の画面でフォントをインストールを押下します
image.png

VisualStudioCodeの設定

ファイル > ユーザー設定 > 設定　を選択します。
image.png
表示される設定画面上部の検索欄に「フォント」と入力します。
image.png
検索欄以下に表示される「Editor:Font Family」の入力欄に「Fira Code」を追加します。
image.png
image.png
検索欄以下に表示される「Editor:Fot Ligatures」欄に表示されている「setting.jsonで編集」を押下します。
image.png
表示される「setting.json」で"editor.fontLigatures": nullを"editor.fontLigatures": trueに変更して上書き保存します。
image.png
image.png
Ctrl+Shift+Pのショートカットコマンドで表示される入力欄にreloadと入力すると候補として表示されるReload Windowを選択します。
image.png
image.png
以下のように設定されたフォントとリガチャの設定が反映されます。
image.png

WebStormの設定

メニュー > Fileを押下します。
image.png
File > Settingsを押下します。
image.png
Settings画面の Editor > Fontを押下します。
image.png
FontにFira Codeを入力して、Enable LigaturesをONにしてApplyとOKを押下します。※Enable LigaturesをOFFでリガチャは使用しない設定になる。
image.png
こんな感じで利用できます。
image.png

さくらエディタの設定

※リガチャは利用不可？ぽい
メニュー「設定」を押下します。
image.png
設定 > フォント設定を押下します。
image.png
フォント設定画面でFira Codeと入力して、OKを押下します。
image.png

  1. 特定の順番に文字を入力すると文字の見た目が変わる仕組みで、例えばJavaScriptでよく利用する「->」や「===」の見た目を以下のように変えてくれる。 ↩

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4