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.

Boz

Which OS are you using and does this issue occurs in other terminals as well? – Penthouse

Sorry I forgot to specify. I'm running Ubuntu 18.04 and no, other terminals (e.g. sh) are fine. I really think it's a font issue related to the arrows introduced with the agnoster theme but I can't figure out a workaround. – Boz

Have you changed default shell to zsh? – Penthouse

Yes I did change it. – Boz

Try this in terminal sudo fc-cache -vf /usr/share/fonts/, if this doesn't work give the output of following terminal command: fc-list | grep -i "Meslo" – Penthouse

Nothing changed. The grep doesn't give any results, so it's like Melso font isn't installed. Which is odd because I've already installed powerline fonts from here 'github.com/powerline/fonts' – Boz

Install the font using sudo apt-get install fonts-powerline and rebuild the font cache using sudo fc-cache -vf /usr/share/fonts/ and recheck if it is installed using fc-list | grep -i "Meslo" – Penthouse

Reinstalled fonts-powerline, rebuilt the font cache and rechecked if Meslo was present. Sadly still nothing.. – Boz

Create a new directory in your home i.e. ~/.fonts and copy the font you need to it. Clear the font cache again using sudo fc-cache -vf. – Penthouse

I checked which font is used in my Terminal (which is Konsole). It's name is Hack. So I changed VSCode terminal font to "Hack" and it works great – Handoff

Answer 1

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!

Boz

You are using a different font from what you posted in your question. – Penthouse

Yes but it doesn't mean much to me. I guess that directly installing Meslo from (github.com/powerline/fonts/tree/master/Meslo%20Dotted) would also work. I still don't get why sudo apt-get install fonts-powerline would ever fail to achive this task with respect to a manual installation. – Boz

Ubuntu 20.04 - sudo apt install fonts-powerline - worked fine for me. – Sydelle

Answer 2

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!

Sugden

Thank you, I think this may be required on MacOS if you are using iterm as installing fonts and then setting the terminal.integrated.fontFamily to the installed font directly doesn't seem to work if you are using a different font in iterm. – Refined

This worked for me while the accepted answer did not... +1 – Reliance

Answer 3

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.

Pithecanthropus

Works perfectly for Manjaro Gnome Desktop – Ichinomiya

Worked with Ubuntu 22.04 – Ulla

Worked in Manjaro Plasma Desktop – Updraft

Answer 4

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.

Studdingsail

Answer 5

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"
}

Bell

Answer 6

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.

Placid

pamac install powerline-fonts-git then set vscode terminal font to "MesloLGS NF" – Tithable

Answer 7

Yey! This works for me... Ubuntu 20.04

Key: Shared fonts think.

https://cloverinks.medium.com/oh-my-zsh-agnoster-theme-not-showing-correct-font-on-vscode-ubuntu-47b5e8dcbada

Boliviano

Answer 8

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

Riptide

Answer 9

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.

Epigoni

Answer 10

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

while the font path is ~/.fonts

Pray