🔠

Mac × VSCode フォント設定｜Homebrewで簡単インストールから設定まで

に公開
VS Code
macOS
idea

今回はMacでのVSCodeフォント変更について解説します。
あとネットで検索したところ、あまりなかったので備忘録としても残します。
（Windowsは情報がたくさんありました！）

フォントを変更して気分を変えましょう！

今回すること

以下のようにフォントを変えていきます。

変更前

変更後

My Macについて

こんな感じです。

system_profiler SPHardwareDataType | grep -E "Model Name|Model Identifier|Chip|Memory"
      Model Name: MacBook Pro
      Model Identifier: Mac14,7
      Chip: Apple M2
      Memory: 16 GB

フォントのインストール方法

おすすめプログラミングフォント

今回は以下の日本語対応のプログラミングフォントをインストールします。
（他の種類について把握しきれていないので他におすすめがある人は絶対コメントしてください！笑）

  • HackGen： 日本語と英語のバランスが良い
  • PlemolJP： 可読性の高い日本語フォント
  • PlemolJP NF： アイコン表示対応版
  • PlemolJP HS： ハーフスペース版

Homebrewでのインストール

ターミナルで以下のコマンドを実行します。

# HackGenのインストール
brew install font-hackgen

# PlemolJPシリーズのインストール（--caskが必要）
brew install --cask font-plemol-jp
brew install --cask font-plemol-jp-nf
brew install --cask font-plemol-jp-hs

注意点 フォントによっては--caskオプションが必要です。
インストールコマンドは各フォントの公式ドキュメントで確認してください。

手動インストールの場合もあるようなのでドキュメント要確認です👀

フォントのインストール確認

インストールが成功したか確認する方法

  1. Command + スペースで「フォントブック」と検索して起動
  2. 右上の検索欄でインストールしたフォント名を検索（例：Plemol）
  3. 一覧から該当フォントを選択
  4. 検索欄の左側にあるiマークをクリック
  5. 右下でフォントの詳細情報を確認

正しくインストールされていれば、フォント名とスタイルが表示されます。

VSCodeでのフォント設定

方法1：settings.jsonで直接編集（推奨）

  1. VSCodeで Command + Shift + P でコマンドパレットを開く
  2. 「Preferences: Open Settings (JSON)」と入力して実行
  3. 以下のように追記または編集
{
  "editor.fontFamily": "'HackGen', 'PlemolJP', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5
}

設定のポイント

  • スペースを含むフォント名はシングルクォーテーションで囲む
  • 複数フォントを指定すると、最初に利用可能なフォントが使用される
  • フォントサイズや行間も合わせて調整するとより見やすくなる

下記のeditor.fontFamilyの行が例です。

方法2：GUIから設定

  1. Command + , で設定を開く
  2. 検索欄で「font family」と検索
  3. 「Editor: Font Family」にフォント名を入力

おすすめフォント設定例

日本語と英語のバランス重視

{
  "editor.fontFamily": "'HackGen', 'Hiragino Sans', sans-serif",
  "editor.fontSize": 13,
  "editor.lineHeight": 1.4
}

PlemolJPシリーズを使用する場合

{
  "editor.fontFamily": "'PlemolJP', 'HackGen', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5
}

トラブルシューティング

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

  1. VSCodeを完全に再起動
  2. フォント名のスペルを確認
  3. フォントブックでインストール状態を再確認
  4. フォント名にスペースがある場合はクォーテーションで囲む

よくあるミス

  • フォント名のタイポ
  • クォーテーションの付け忘れ
  • カンマの忘れ

まとめ

以上がMacでのVSCodeフォント変更方法でした！
最初の方にも書きましたが、みなさんこだわりのお勧めフォントがあれば是非コメントをお願いします🙇

Discussion