53
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-25

やりたいこと

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に記述すべきファミリ名です. スペースも忘れずに入力してください.

スクリーンショット (26).png
スクリーンショット (28)_LI.png

あとがき

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

53
29
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
53
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?