icons don't display in VS code integrated terminal after setting terminal.integrated.fontFamily

[JoeNormyl]

I recently installed oh-my-zsh and powerlevel10k in iTerm2. I installed the font through p10k config and it looks beautiful!!!

But when I try to apply the font to my VScode integrated terminal none of the icons display in the prompt.

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

but it makes no difference. I also tried to add the extra set of single quotes:

"terminal.integrated.fontFamily": "'MesloLGS NF'",

No matter what I've tried, nothing seems to fix the issue. After googling exhaustively, I turn to you. Thanks for your help!

[romkatv]

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.
3. Open Settings in Visual Studio Code.
   • On PC: press Ctrl+, or click File → Preferences → Settings.
   • On Mac: press ⌘ , or click Code → Preferences → Settings.

4. Enter terminal.integrated.fontFamily in the search box at the top of Settings tab and set the value below to MesloLGS NF.

   

You can find similar instructions for all popular terminals in this document: https://github.com/romkatv/powerlevel10k/blob/master/font.md

[sortega]

@Joey-Provolone, if you fixed it, can you post also here the solution?

[romkatv]

@sortega The instructions in my previous comment should work: https://github.com/romkatv/powerlevel10k/issues/671#issuecomment-621031981

[sortega]

You are 100% correct

[rahulreghunath]

@Joey-Provolone You can simply change terminal from integrated to external to make that work

[romkatv]

@Joey-Provolone You can simply change terminal from integrated to external to make that work

That will disable the integrated terminal altogether. Many VS Code users (myself included) like to have a terminal integrated within the IDE.

[steveninouye]

Cmd+Shift+P Search: Terminal Font Input: MesloLGS NF

[AdamSchinzel]

https://medium.com/@youngstone89/how-to-change-font-for-terminal-in-visual-studio-code-c3305fe6d4c2 here is also the answer

[barakharyati]

or just add the following lines to settings.json:

"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.integrated.fontFamily": "MesloLGS NF"

example: { "terminal.external.osxExec": "iTerm.app", "terminal.integrated.shell.osx": "/bin/zsh", "terminal.integrated.fontFamily": "MesloLGS NF" }

[gatham01]

Visual Studio Code: Open File → Preferences → Settings, enter terminal.integrated.fontFamily in the search box and set the value to MesloLGS NF.

[Mario-paul]

@sortega The instructions in my previous comment should work: https://github.com/romkatv/powerlevel10k/issues/671#issuecomment-621031981

I came from google. This worked perfectly, thank you!

[sylvain-gdk]

@gatham01 Visual Studio Code: Open File → Preferences → Settings, enter terminal.integrated.fontFamily in the search box and set the value to MesloLGS NF.

this was necessary for me as well, thanks (ps official instructions were not sufficient))

[romkatv]

I've updated the instructions in https://github.com/romkatv/powerlevel10k/blob/master/font.md based on the feedback from this issue and replaced my first comment with a copy so that future readers who stumble upon this issue get to the useful information quicker.

[ozzbetto]

Works fine for me in powerlevel10K on Mac. Thanks so much.

[HarishChandran3304]

I had the exact same problem on Ubuntu 20.04 and nothing worked. All I had to do was copy and paste the 4 .ttf files (MesloLGS NF Regular.ttf, MesloLGS NF Bold.ttf, MesloLGS NF Italic.ttf and MesloLGS NF Bold Italic.ttf) inside the usr/share folder to fix it.

[romkatv]

@HarishChandran3304 You must have skipped steps in the instructions that tell you to install the font. The first two steps here: https://github.com/romkatv/powerlevel10k/issues/671#issuecomment-621031981. You need to perform all steps without skipping any.

[HarishChandran3304]

@romkatv Actually, I did finish all the steps without skipping any and the font was working just fine on my GNOME terminal. It was an issue only on VS Code.

[romkatv]

Where did you copy the ttf files to make it work?

[HarishChandran3304]

Where did you copy the ttf files to make it work?

Inside the usr/share folder

[romkatv]

Where did you copy the ttf files to make it work?

Inside the usr/share folder

Please be more specific.

[HarishChandran3304]

Where did you copy the ttf files to make it work?

Inside the usr/share folder

Please be more specific.

Sorry about that! I'm new to Linux and I'm still not familiar with the directory system. I ll try my best to be more specific. When I open the file explorer in my root directory there a couple of the default folders like Desktop, Documents, Downloads, etc. And there is also another folder called share. That is where i copied the 4 .ttf files into to make it work.

This is what it looks like on my terminal:

[romkatv]

Thanks! That would be ~/share -- you can see that on the left side of your prompt. ~ stands for your home directory, so the full path is something like /home/username/share. You can see it by typing pwd.

It's unlikely that copying the *.ttf files to ~/share has made any difference but it's technically possible if you'd made non-trivial and unusual changes to your system. Let's try to find out. Please post the output of the following command:

 fc-list 'MesloLGS NF'

[HarishChandran3304]

Ahh okay got it! I too felt that it was highly unlikely that copying the *.ttf files into the ~/share folder made any difference. So I tried testing some things on my own. My hypothesis was that VS Code was unable to recognize externally installed fonts unless the .ttf files were copied into the ~/share folder.

I reinstalled VS Code using the .deb file from the official website and then everything seemed to be working fine. So I looked around and found this issue which says VS Code installations made using "snap" (I'm not sure what that is yet, another package manager I believe) (I had installed VS Code using the "Ubuntu Software" application which I believe uses snap), had problems recognizing fonts. And they also say that they found a workaround by pasting the .ttf files into the ~/share or the ~/share/fonts folder to make it work which is exactly what I had to do.

If you can look this over and confirm this you can maybe add some extra instructions to tell the users to try pasting the .ttf files into either the ~/share or the ~/share/fonts folder and if that doesn't work they would have to reinstall VS Code using the .deb file from the official website using appropriate commands. These are the commands that I used just in case.

To uninstall snap version of VS Code:

$ snap remove code

To install the .deb file:

$ sudo apt install /path/to/package/name.deb

Also, all my VS Code preferences, settings, and extensions were preserved, so I don't think reinstalling should be a problem for others!

[HarishChandran3304]

Oh wait oops! I forgot to send the output you were looking for. Here:

 ~  fc-list 'MesloLGS NF'                                                  ✔ 
/home/harish/.local/share/fonts/MesloLGS NF Bold.ttf: MesloLGS NF:style=Bold
/home/harish/.local/share/fonts/MesloLGS NF Italic.ttf: MesloLGS NF:style=Italic
/home/harish/.local/share/fonts/MesloLGS NF Bold Italic.ttf: MesloLGS NF:style=Bold Italic
/home/harish/.local/share/fonts/MesloLGS NF Regular.ttf: MesloLGS NF:style=Regular

[romkatv]

So I looked around and found this issue

Thanks for the link. This issue has been fixed in 2019. Ubuntu 20.04 shouldn't be affected.

And they also say that they found a workaround by pasting the .ttf files into the ~/share or the ~/share/fonts folder to make it work which is exactly what I had to do.

Hm... https://github.com/Microsoft/vscode/issues/63194#issuecomment-465036941 says this:

Current workaround: copy fonts to /usr/share/fonts

You've copied the files to ~/share. That's not the same directory.

Can you double-check the whole thing? Uninstall VS Code, install it from Snap Store and verify that it can use MesloLGS NF. Then delete the ttf files from ~/share, restart VS Code and verify that it cannot use MesloLGS NF.

[chrisdemars]

I tried all of these solutions and my integrated terminal still looks like this.

[romkatv]

@chrisdemars That ugly font on your screenshot is the fallback font. VS Code uses it when the font specified in the VS Code settings does not exist. This can happen if you haven't installed the font or if you've mistyped its name in VS Code settings.

[chrisdemars]

@romkatv I have it spelled the exact same. I am using "MesloGS NF". I am wondering if at this point it is a bug in VS Code.

[romkatv]

It could be a bug in VS Code, yes. Are you sure the font is installed? Can you use it in other applications on the same machine? If yes, then perhaps you are running VS Code in some kind of container?

[chrisdemars]

@romkatv I am using it with iTerm2 with no issue.

[romkatv]

I am using "MesloGS NF"

The correct name is "MesloLGS NF".

[chrisdemars]

@romkatv I must be an idiot. HOW did I not see the "L" in "MesloL" lol? That fixed it!

[ImADrafter]

In case you are using a different font, setting MesloLGS NF as fallback would work also

  "terminal.integrated.fontFamily": "'Terminus (TTF)', 'MesloLGS NF'",

[benji011]

@gatham01 Visual Studio Code: Open File → Preferences → Settings, enter terminal.integrated.fontFamily in the search box and set the value to MesloLGS NF.

this was necessary for me as well, thanks (ps official instructions were not sufficient))

Thank you! This worked for me

[seifolah-ghaderi]

I recently installed oh-my-zsh and powerlevel10k in iTerm2. I installed the font through p10k config and it looks beautiful!!!

But when I try to apply the font to my VScode integrated terminal none of the icons display in the prompt.

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

but it makes no difference. I also tried to add the extra set of single quotes:

"terminal.integrated.fontFamily": "'MesloLGS NF'",

No matter what I've tried, nothing seems to fix the issue. After googling exhaustively, I turn to you. Thanks for your help!

Hi @Joey-Provolone , What theme you are using? it's beautiful! where can i find this background image?

[byrapaneni4u]

It Worked Thanks...

[submagr]

I had to restart VSCode for the new font changes to reflect, but it worked after that.

[stanedav]

Hello, I am trying to set up the font in the VS Code on my mac. I did the following:

• Installed the fonts (I checked and I CAN use them in the system - e.g: Word)
• In the settings I set up the "Terminal > Integrated: Font Family" to MesloLGS NF
• Restarted the VS Code It looks like that: Could you please help me how to set it up correctly? Thank you

edit: fc-list 'MesloLGS NF' output:

/Users/dstanek/Library/Fonts/MesloLGS NF Regular.ttf: MesloLGS NF:style=Regular
/Users/dstanek/Library/Fonts/MesloLGS NF Bold.ttf: MesloLGS NF:style=Bold
/Users/dstanek/Library/Fonts/MesloLGS NF Bold Italic.ttf: MesloLGS NF:style=Bold Italic
/Users/dstanek/Library/Fonts/MesloLGS NF Italic.ttf: MesloLGS NF:style=Italic

[romkatv]

@stanedav Sorry, I don't know how to help you. This issues is not related to zsh or powerlevel10k, so you might have better luck asking on a forum dedicated to VS Code and/or Mac.

[JohannBandelow]

Re-configuring p10k solved for me, inside vscode integrated terminal: p10k configure

[bersace]

Instead of using patched font, you can simply define a fallback font like 'icons-in-terminal':

[mutantkeyboard]

To add, if someone is using Manjaro Linux KDE 20 or higher, the font family that worked for me was: "terminal.integrated.fontFamily": "NotoSansMono Nerd Font"

[iftemplar]

@romkatv Thanks, your solution saved a lot of my time!

[Aernila]

in my VScode it looks like the icons are half cut. any suggestions please??

[romkatv]

It's a bug in vscode terminal. I think it's been fixed in the insider build.

[tonmoy998]

Follow Romkatv!! He is correct

[FedericoCapaldo]

MesloLGS NF may not be the correct solution for everyone. It depends which font you have installed in your command line. For example mine was Inconsolata for Powerline.

A more generic approach to solve the problem is:

1. Find out which font you use on your terminal. For example in Mac iTerm, you'll open a new iTerm window and go ⌘ + , > Profiles > Text > Font and remember the font you found there. This procedure is different from you if you are not using iTerm
2. Go onto VSCode and go Cmd + Shift + P > search for "Settings UI" > Press Enter > search for "terminal.integrated.fontFamily" and add the font that you have on your command line which you have found in step 1.
3. Open you terminal in VSCode with Ctrl + Backquote or from the menu, and it should all work now.

[Trojann]

in my VScode it looks like the icons are half cut. any suggestions please??

try this: "terminal.integrated.gpuAcceleration": "canvas" worked for me

[Aernila]

in my VScode it looks like the icons are half cut. any suggestions please??

try this: "terminal.integrated.gpuAcceleration": "canvas" worked for me

@Trojann , your suggestion worked perfect! now the icons looks normal! Thank you , guys! you rock!

[rodrigocnascimento]

I had the exact same problem on Ubuntu 20.04 and nothing worked. All I had to do was copy and paste the 4 .ttf files (MesloLGS NF Regular.ttf, MesloLGS NF Bold.ttf, MesloLGS NF Italic.ttf and MesloLGS NF Bold Italic.ttf) inside the usr/share folder to fix it.

This is the right answer! I'm using Ubuntu 22.04