iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🔠

Mac × VSCode Font Settings: From Easy Installation with Homebrew to Configuration

に公開
VS Code
macOS
idea

This time, I'll explain how to change the font in VSCode on Mac.
I searched online and found very little information about this, so I'm also leaving this as a memo.
(There was plenty of information for Windows!)

Change your font and refresh your mood!

What We'll Do

We'll change the font as shown below.

Before

After

About My Mac

Here's the spec.

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

How to Install Fonts

We will install the following programming fonts that support Japanese.
(I don't have a complete grasp of other types, so if you have other recommendations, please definitely leave a comment! lol)

  • HackGen: Good balance between Japanese and English
  • PlemolJP: Highly readable Japanese font
  • PlemolJP NF: Version with icon display support
  • PlemolJP HS: Half-space version

Installing with Homebrew

Run the following commands in the terminal.

# Install HackGen
brew install font-hackgen

# Install PlemolJP series (--cask required)
brew install --cask font-plemol-jp
brew install --cask font-plemol-jp-nf
brew install --cask font-plemol-jp-hs

Note: Some fonts require the --cask option.
Check the official documentation for each font for the installation command.

Since manual installation might also be an option, be sure to check the docs 👀

Verifying Font Installation

How to check if the installation was successful:

  1. Press Command + Space, search for "Font Book," and launch it.
  2. Use the search bar in the upper right to look up the installed font name (e.g., Plemol).
  3. Select the corresponding font from the list.
  4. Click the i icon on the left side of the search bar.
  5. Check the font details at the bottom right.

If installed correctly, the font name and style will be displayed.

Font Settings in VSCode

Method 1: Direct Editing in settings.json (Recommended)

  1. Open the command palette in VSCode with Command + Shift + P.
  2. Type "Preferences: Open Settings (JSON)" and run it.
  3. Add or edit the following:
{
  "editor.fontFamily": "'HackGen', 'PlemolJP', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5
}

Configuration Points

  • Font names containing spaces should be enclosed in single quotes.
  • If multiple fonts are specified, the first available font will be used.
  • Adjusting the font size and line height together makes it more readable.

Below is an example of the editor.fontFamily line.

Method 2: Configuring via GUI

  1. Open Settings with Command + ,.
  2. Search for "font family" in the search bar.
  3. Enter the font name in "Editor: Font Family".

Emphasizing Balance Between Japanese and English

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

When Using the PlemolJP Series

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

Troubleshooting

If the Font is Not Applied

  1. Completely restart VSCode.
  2. Check the spelling of the font name.
  3. Re-verify the installation status in Font Book.
  4. If the font name contains spaces, enclose it in quotes.

Common Mistakes

  • Typo in the font name
  • Forgetting to add quotes
  • Missing commas

Summary

That's all for how to change the font in VSCode on Mac!
As I mentioned at the beginning, if you have a go-to recommended font, please feel free to leave a comment 🙇

Discussion