Introduction

Terminal fonts in VS Code can cause frustrating display issues - from missing characters to garbled powerline symbols, from font ligatures not working to incorrect fallback fonts being used. The terminal uses a different rendering engine than the editor, so font settings sometimes need separate configuration.

Common Font Problems

Problem 1: Wrong Font Displayed

Your terminal shows a different font than expected, often a default monospace font instead of your configured font.

Problem 2: Missing Characters or Tofu

Characters appear as boxes (tofu) or question marks, indicating the font doesn't contain those glyphs.

Problem 3: Powerline Symbols Broken

Git status bars and powerline prompts show broken characters like [?] or boxes instead of arrows and branch symbols.

Problem 4: Ligatures Not Working

Programming ligatures (=> becomes →, != becomes ≠) work in the editor but not in the terminal.

Step-by-Step Fixes

Step 1: Configure Terminal Font Family

Open your settings.json (Ctrl+, then click "Open Settings (JSON)"):

json
// settings.json
"terminal.integrated.fontFamily": "MesloLGS NF, MesloLGM NF, MesloLGL NF"

For Cascadia Code:

json
"terminal.integrated.fontFamily": "Cascadia Code, Cascadia Code PL"

For JetBrains Mono:

json
"terminal.integrated.fontFamily": "JetBrains Mono"

For Fira Code:

json
"terminal.integrated.fontFamily": "Fira Code, FiraCode NF"

The key is listing fonts in order of preference, with Nerd Font versions first.

Step 2: Install Nerd Fonts

Most powerline and special symbols require Nerd Fonts, which patch popular fonts with additional glyphs.

Windows: ```powershell # Using scoop scoop bucket add nerd-fonts scoop install Meslo-NF

# Or download manually from # https://github.com/ryanoasis/nerd-fonts/releases ```

macOS: ```bash # Using Homebrew brew tap homebrew/cask-fonts brew install --cask font-meslo-lg-nerd-font

# Or install all Nerd Fonts brew install --cask font-nerd-fonts ```

Linux: ``bash # Download and install mkdir -p ~/.local/share/fonts cd ~/.local/share/fonts wget https://github.com/ryanoasis/nerd-fonts/releases/latest/download/Meslo.zip unzip Meslo.zip fc-cache -fv

Step 3: Configure Font Size and Line Height

Incorrect line height can cause characters to be clipped:

json
// settings.json
"terminal.integrated.fontSize": 14,
"terminal.integrated.lineHeight": 1.2

If characters appear vertically misaligned:

json
"terminal.integrated.lineHeight": 1

Step 4: Enable Font Ligatures in Terminal

Ligatures require explicit enabling in the terminal:

json
// settings.json
"terminal.integrated.fontFamily": "Fira Code",
"terminal.integrated.enableLigatures": true

Note: Some shells don't support ligatures. PowerShell and bash typically work, but some configurations may override this.

Step 5: Fix Powerline and Prompt Symbols

If using Oh My Posh, Starship, or similar prompts:

Verify the prompt uses a Nerd Font:

json
// For Oh My Posh in PowerShell
// Add to PowerShell profile
oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH\paradox.omp.json" | Invoke-Expression

For Starship:

```toml # starship.toml [character] success_symbol = "[➜](bold green)" error_symbol = "[➜](bold red)"

[git_branch] symbol = " " ```

Configure VS Code to use the same font:

json
// settings.json
"terminal.integrated.fontFamily": "'MesloLGS NF'"

Step 6: Check Font Fallback Chain

When a font doesn't contain a character, VS Code falls back to another font. Configure this explicitly:

json
// settings.json
"terminal.integrated.fontFamily": "'MesloLGS NF', 'Symbols Nerd Font', monospace"

Use the developer tools to see which font is rendering:

Press Ctrl+Shift+I, select an element in the terminal, and check the "Computed" tab for the font-family property.

Step 7: Configure Bold and Italic Variants

Some fonts handle bold/italic differently:

json
// settings.json
"terminal.integrated.fontFamily": "JetBrains Mono",
"terminal.integrated.fontWeight": "normal",
"terminal.integrated.fontWeightBold": "bold"

If bold text looks wrong:

json
"terminal.integrated.fontWeightBold": "normal"

Step 8: Handle Unicode and Emoji

For proper Unicode and emoji rendering:

json
// settings.json
"terminal.integrated.unicodeVersion": "6"

If emoji appear as boxes:

json
"terminal.integrated.gpuAcceleration": "auto"

Or disable GPU acceleration if it causes issues:

json
"terminal.integrated.gpuAcceleration": "off"

Step 9: Shell-Specific Configuration

PowerShell:

```powershell # Check current font in PowerShell $host.UI.RawUI.FontFamily

# Set in PowerShell profile $host.UI.RawUI.FontFamily = "MesloLGS NF" ```

Bash/Zsh:

bash
# In .bashrc or .zshrc
# Check if the terminal supports Unicode
if [[ $TERM_PROGRAM == "vscode" ]]; then
    export LANG=en_US.UTF-8
fi

WSL:

json
// settings.json
"terminal.integrated.defaultProfile.windows": "WSL",
"terminal.integrated.profiles.windows": {
    "WSL": {
        "source": "Windows.Terminal.Wsl",
        "font": {
            "face": "MesloLGS NF",
            "size": 14
        }
    }
}

Troubleshooting Specific Issues

Boxes Instead of Characters

This means the font doesn't have that glyph. Install a Nerd Font version of your preferred font.

Double-Width Characters (CJK)

For Chinese, Japanese, Korean characters:

json
// settings.json
"terminal.integrated.unicodeVersion": "11",
"editor.fontLigatures": false

Characters Overlapping

Increase letter spacing:

json
// settings.json
"terminal.integrated.letterSpacing": 1

Blurry Fonts on High DPI Displays

json
// settings.json
"window.zoomLevel": 0,
"editor.fontLigatures": true
  1. 1.On Windows, ensure ClearType is configured:
  2. 2.Search "ClearType" in Start menu
  3. 3.Run the ClearType Text Tuner
  4. 4.Select your preferred text appearance

Font Size Too Small on Linux

json
// settings.json
"terminal.integrated.fontSize": 16,
"window.zoomLevel": 1

Platform-Specific Notes

Windows

  • Use fonts installed for all users if having issues
  • Check Display Scaling settings in Windows
  • Try disabling "Let Windows try to fix apps so they're not blurry"

macOS

  • Install fonts via Font Book
  • Some fonts need "Install for me" rather than "Install for all users"

Linux

```bash # Verify font is installed fc-list | grep -i meslo

# Rebuild font cache fc-cache -fv ```

Verification

After making changes:

  1. 1.Close and reopen the terminal (Ctrl+Shift+P > "Terminal: Kill All Terminals")
  2. 2.Open a new terminal
  3. 3.Test special characters: echo "→ ✓"
  4. 4.Test powerline symbols if using a prompt
  5. 5.Run fc-list | grep <fontname> on Linux/macOS to verify installation
  • VS Code Icon Theme Not Showing
  • VS Code File Icons Not Loading
  • VS Code Bracket Colorization Not Working