VScode のFont Family設定でハマった話


やりたいこと

WindowsのVSCodeでotfやttfでインストールしてきたフォントを利用したい.

僕の場合, プログラミングだけでなく, markdown形式で原稿の執筆したりしたかったので, いろいろとフォントを変えて試していたんですが, 反映されたり反映されないフォントがあって意外とハマってしまいました.
今回は, 解決のために何をしていったかという話を書いていきます.

設定したはずのフォントが上手く反映されず, 困っている人の助けになれば幸いです.

解決策

解決策1: VSCodeの再起動

ここでは例としてプログラミング用フォントのRicty Diminishedをttf形式でインストールします.

インストール後, VSCodeのsettings.jsonで以下の記述を追加.

"editor.fontFamily": "Ricty Diminished",

ここでフォントの確認をしたときに反映されなかったりすることがあるんですが, VSCodeの再起動で反映されるようになりました.

解決策2: Font Familyに記述すべきファミリ名を知る

settings.jsonにFontFamilyを設定して, VSCodeを再起動したにも関わらず何も変化しない場合があります.

そういう場合は, そもそもFontFamilyに設定している名前を間違えている可能性があります. 特に日本語用フォントや有料フォントにありがちなんですが, フォント名と設定するファミリ名が違ったりすることがあるので, 以下の方法で確認してみてください.

Windows10 の場合 コントロールパネル > デスクトップのカスタマイズ > フォントの順で開くとPCにインストールされているフォント一覧が確認できます.

設定すべきはここにある名前ではなく, 画像のようにファミリを有効にして確認できるファミリこそVSCodeのFont Familyに記述すべきファミリ名です. スペースも忘れずに入力してください.


あとがき

まさかフォントの設定でハマるとは思っていなかったので, 思わぬところで時間を取られてしまいました.
初期設定はサクッと終わらせて, もりもり開発していきましょう!