Font issues while integrating ZSH on Visual Studio Code

Question

I'm trying to integrate zsh on my VSC setup but apparently arrows are not recognized by it.

My zsh theme is agnoster and I've already tried adding "terminal.integrated.fontFamily": "Meslo LG M DZ for Powerline" with no success. Anyone experienced something like this and can give me a hand? Thanks.

Answer 1

In my case, using zsh and the agnoster theme I had to move the font files to the fonts folder because installing them was not simply enough.

$ sudo mv Menlo*.ttf /usr/share/fonts

I found inspiration here, but I used the Meslo fonts, not the Menlo ones. So in my VSCode settings are:

{
    ...,
    "terminal.integrated.fontFamily": "MesloLGS NF"
}

My case is a bit special but just in case it helps anybody.

Cheers!

Answer 2

In Sonoma, install MesloLGS Nerd Font fonts and change the setting to "terminal.integrated.fontFamily": "MesloLGS Nerd Font" in settings.json

Answer 3

First of all, why?

Most modern shell prompts use particular fonts (e.g. Powerline, NerdFonts, etc.) which are designed to enhance the visual appearance of terminal applications by providing additional symbols, icons, and glyphs. If you don't have this type of font installed in your system you won't be able to see those special symbols.

How to fix it?

The fix is pretty straightforward. You will find yourself in one of the following two cases.

[Case 1] It looks fine inside my everyday terminal but not in VSCode

This is the easy one. Most probably you just have to tell VSCode to use your terminal font.

1. Find out and copy your everyday terminal font

   1. Open the terminal you usually use outside of VSCode. For instance, if you are on MacOS and you're using iTerm2, go to iTerm2 › Preferences › Profiles › Text and copy the Font Name (e.g. MesloLGS NF)

2. Set the terminal font on VSCode

   1. Open File → Preferences → Settings (PC/Linux) or Code → Settings... → Settings (Mac)
   2. Enter terminal.integrated.fontFamily in the search box at the top of Settings tab
   3. Set the font name you copied at the previous step into the Terminal › Integrated: Font Family field

   

3. [Alternatively] Modify the VSCode settings.json file and add

   {
       ...,
       "terminal.integrated.fontFamily": "MesloLGS NF"
   }
   

4. Done! 🎉 Now you should see every symbol correctly

[Case 2] I'm having font issues even in my everyday terminal

If this is the case you'll probably need to install a compatible font. I like and recommend Nerd Fonts but also Powerline Fonts or Fontawesome Fonts work totally fine.

1. Download and install a compatible font

   1. Download these four ttf files:
      • MesloLGS NF Regular.ttf
      • MesloLGS NF Bold.ttf
      • MesloLGS NF Italic.ttf
      • MesloLGS NF Bold Italic.ttf
   2. Double-click on each file and click "Install". This will make MesloLGS NF font available to all applications on your system.

2. Set the terminal font on VSCode

   1. Open File → Preferences → Settings (PC/Linux) or Code → Settings... → Settings (Mac)
   2. Enter terminal.integrated.fontFamily in the search box at the top of Settings tab
   3. Set MesloLGS NF as value into the Terminal › Integrated: Font Family field

   

3. [Alternatively] Modify the VSCode settings.json file and add

   {
       ...,
       "terminal.integrated.fontFamily": "MesloLGS NF"
   }
   

4. Done! 🎉 Now you should see every symbol correctly

I don't like the MesloLGS NF font, how can I change it?

You can find many different compatible fonts, for instance here https://www.nerdfonts.com/font-downloads. Install them by downloading the tff files as explained and simply change the terminal font setting in VSCode to use them.

I recommend this site https://www.programmingfonts.org/#meslo which gives you a test drive of all the most used programming fonts!

Answer 4

Ubuntu 22.04 Solution:

1. Download and extract fonts:

   wget https://github.com/ryanoasis/nerd-fonts/releases/download/v2.0.0/Meslo.zip
   
   sudo unzip Meslo.zip -d /usr/share/fonts/truetype/Meslo
   

2. Go to vscode settings: File > Preference > Settings

3. Search : terminal integrated font

4. Insert font name : MesloLGM Nerd Font

Restart VS Code.

Done !

example image

Answer 5

In manjaro, install MesloLGS fonts and change the setting to"terminal.integrated.fontFamily": "MesloLGS NF" in settings.json

while the font path is ~/.fonts

Answer 6

I had the same exact issue on my Macbook. The problem was that the font I was using in Iterm was not added in the Terminal of VSCode.

Fix

fix was simple, you have to go to open Iterm -> Preferences -> Profiles -> Text and copy the Font Name

now head over to VS Code:

• Open settings
• In the search bar, type Terminal Font
• Paste the font name in Terminal > Integrated: Font Family

and that will fix the issue for you!

Answer 7

Most of the other answers didn't solve the issue for me in Manjaro Linux (KDE).

I eventually found a solution that made the Powerline glyphs visible in my VS Code zsh terminal:

https://forum.manjaro.org/t/kde-powerline-glyphs-missing-in-vscode-integrated-terminal-only/63742/3

Just set the font to NotoSansMono Nerd Font. This font was already installed on my system. I did not need to download any additional fonts.

There are two ways to change the font in VS Code:

1. Change the following line in settings.json:

   "terminal.integrated.fontFamily": "NotoSansMono Nerd Font"
   

2. Alternatively, go to Settings -> Features -> Terminal and set Terminal > Integrated: Font Family to:

   NotoSansMono Nerd Font
   

You may need to restart VS Code.

Answer 8

If you already have a font installed which is looking fine in your terminal app (for example in iTerm2) and the font is just messed up inside VSCode, you don't have to install any additional fonts. Just add:

{
  ...,
  "terminal.integrated.fontFamily": "YourFontName"
}

to your settings.json where YourFontName is the name of the font you would like to use. On macOS you can see what fonts you have installed in your font book (search for font book in the spotlight Command + Space) which looks like this:

In my case my settings.json has the following entry:

{
  ...,
  "terminal.integrated.fontFamily": "MesloLGS NF"
}

Answer 9

For me it worked for linux and as well as manjaro (i don't know why others solution weren't working for me).

Download this font download font from here , Then create a folder named "Meslo" and extract all the fonts inside it.
Move this folder to /usr/share/fonts/truetype/
Run this command:

sudo fc-cache -vf /usr/share/fonts/

In settings.json of vscode add this line:

"terminal.integrated.fontFamily": "MesloLGM Nerd Font"

Save and Restart if necessary, it should work. Done.

Answer 10

I had the same problem with my VS Code, WSL terminal (PowerLevel10K) on Windows 10. It looked exactly like yours. I found that my Terminal>Integrated:Font Family was named incorrectly. I use "DroidSansMono Nerd Font". I had entered it as "Droid Sans Mono Nerd Font".

That is not the way the font name shows up in programs like Word, Notepad or Photoshop. When I entered as it was shown in notepad,

I closed and reopened my VS Code terminal and everything rendered as expected.

So check your installed font name in your operating system's word processing software and see how it is listed. Enter it likewise into Terminal>Integrated:Font Family and your VS Code terminal should render correctly also.

Answer 11

Finally made it work after going through many blogs and GitHub comments. The below steps works for macOS.

1. Clone the Menlo for powerline font

git clone https://github.com/abertsch/Menlo-for-Powerline.git

2. Open this folder in finder. Double click on Menlo for Powerline.ttf file.

3. Click on Install Font

4. Open the settings.json file in VSCode and add the below line.

"terminal.integrated.fontFamily": "Menlo for Powerline"

If you still can't see the fonts in the terminal try restarting VSCode.

You can use the above steps to use any font you want.