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

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 <kbd>Ctrl+,</kbd> or click File → Preferences → Settings.
   • On Mac: press <kbd>⌘ ,</kbd> 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

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

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

@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.

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

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

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

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

You are 100% correct

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?

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

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"

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

You are a life saver my friend. Thank you so much. i was wondering why the fonts was displaying in my iterm2 but not VS Code.

Problem solved! 👍🏾

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.

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.

@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!

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.

Thank you so much FedericoCapaldo I don’t know how or why but this UI setting was overwriting what I had in my JSON. When I went to look at this, I saw that MesloLGS NF was not in quotes which was causing the issue. It works now FYI for anyone still having this issue

it worked for me "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font",

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

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

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

I had to use the fullname for font: MesloLGS Nerd Font

Arch Linux here: installed ttf-meslo-nerd from https://archlinux.org/packages/extra/ then i had to specify MesloLGS Nerd Font in vscode settings json and not MesloLGS NF: "terminal.integrated.fontFamily": "MesloLGS Nerd Font"

I had to use the fullname for font: MesloLGS Nerd Font

Yes, VSCode supports fallback fonts.

@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))

You spelled FiraCode as FuraCode

Yeah, I think it’s intentional 😃, ‘FiraCode Nerd Font Mono’ is also in there, if it doesn’t find ‘‘FuraCode Nerd Font Mono’’ it defaults to ‘Fira’. Idk if there is such a thing as FuraCode fonts, but as it’s working imma leave it for now

It’s a configuration i took from here: https://gitlab.com/pinage404/dotfiles/-/blob/main/dotfiles/config/Code/User/settings.json

because font not downloaded or not configured…

1-download MesloLGS NF Regular font 2-after that go to setting and search terminal.integrated.fontFamily and set it to MesloLGS NF

“MesloLGS Nerd Font” is not the same font as “MesloLGS NF”. The latter is the recommended font with properly sized icons.

You can only instruct vscode to use a font that you have installed. If you’ve installed MesloLGS Nerd Font but not MesloLGS NF, then you can instruct vscode to use the former but not the latter. If you install MesloLGS NF, you’ll be able to use it in vscode.

Mono Lisa doesn’t have nerd font icons (e.g., U+F306). If GNOME Terminal is able to display this icon, it’s either using a different font to start with, or a fallback font with the icons.

Indeed, but other terminal applications allow you to set a different way to handle symbols, apart from the terminal font face. For example: https://sw.kovidgoyal.net/kitty/conf/#opt-kitty.symbol_map

And Nerd Fonts provides a separate download only containing symbols, which you can use with that option.

Is there a way to achieve this in VS Code?

If you are unable to change the font in vscode, ask for help in places where people ask for help with vscode. The question is: How to change the font used by the integrated terminal in vscode. Note that zsh and powerlevel10k don’t enter the picture.

is perfect for my vs

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.

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

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

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

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'

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: