Font issues while integrating ZSH on Visual Studio Code

Following this little guide solved the issue making-powerline-work-in-visual-studio-code-terminal.

IMPORTANT: if you already have a powerline font installed (e.g. it looks fine inside your system terminal), skip step 1.

1. Install a patched version of your desired font directly from https://github.com/powerline/fonts. Apparently doing the "quick installation" (e.g. sudo apt-get install fonts-powerline) does not work in this case. So you can install manually downloading the .ttf file directly or running the install script ./install.sh provided. For instance you can do the following:

   1. Clone the repository:

      git clone https://github.com/powerline/fonts && cd fonts
      

   2. Run ./install.sh to install them all or install one specific font by going inside its directory and opening the .ttf file. For instance, manually installing DejaVu Sans Mono for Powerline:

      • cd DejaVuSansMono
      • Open DejaVu Sans Mono for Powerline.ttf
      • Install the font

2. Add the terminal.integrated.fontFamily to your User Settings settings.json in VSCode specifying the powerline font to use. For instance, if I want to use DejaVu Sans Mono for Powerline:

   {
       [...]
       "terminal.integrated.fontFamily": "DejaVu Sans Mono for Powerline",
       [...]   
   }
   

3. Restart Visual Studio Code

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.

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.

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!

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

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

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.

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.