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: #671 (comment)

[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: #671 (comment)

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: #671 (comment). 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... microsoft/vscode#63194 (comment) 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.

[AlphicJay]

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! 👍🏾

[lef-fan]

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"

[romkatv]

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

[Orrimp]

I installed my Nerd Font with Homebrew and hat to put

"terminal.integrated.fontFamily": "'MesloLGS Nerd Font'",

[romkatv]

I installed my Nerd Font with Homebrew and hat to put

"terminal.integrated.fontFamily": "'MesloLGS Nerd Font'",

That's not the recommended font though. You can use it if you like it: powerlevel10k works with any font. The recommended font is basically the same but with properly sized icons.

[dcodeu]

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

Thanks for that! Works like a charm

Came from Google! This worked perfectly for me!

[Welding-Torch]

Here from google. I set the renderer to canvas and the font to FiraCode Nerd Font, but the icons are still being cut off :(

[amirhajif]

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

[Welding-Torch]

I tried that mate, I'm getting this same problem with any nerd font I tried 5 of them.

[romkatv]

@Welding-Torch Try following the instructions very carefully.

[Welding-Torch]

@romkatv Okay. I've followed along once again, and unfortunately I'm getting the same result:

Can someone recommend a fix?

[romkatv]

@Welding-Torch This does not look like a Powerlevel10k prompt.

[tehpsalmist]

Don't forget to restart VS Code if you've newly installed the font. :)

[Yeshey]

I wantd to install the font Fira Code

none of the suggestions were working, only when I added this collection of options did it start working

    "customPresentationMode.overrides": {
        "workbench.colorTheme": "Visual Studio Light",
        "window.zoomLevel": 1,
        "debug.console.fontSize": 26,
        "editor.fontSize": 26,
        "markdown.preview.fontSize": 26,
        "terminal.integrated.fontSize": 26,
        "gitlens.codeLens.enabled": false,
        "gitlens.currentLine.enabled": false
    },
    "workbench.colorTheme": "Monokai Dark Soda",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontFamily": "'FuraCode Nerd Font Mono', 'FiraCode Nerd Font Mono', 'Fira Code', 'Droid Sans Mono', Menlo, Monaco, 'Courier New', monospace, 'Droid Sans Fallback'",
    "debug.console.fontSize": 16,
    "editor.fontSize": 16,
    "markdown.preview.fontSize": 16,
    "terminal.integrated.fontSize": 16,
    "editor.fontLigatures": true,

[Welding-Torch]

You spelled FiraCode as FuraCode

[Yeshey]

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

[halilim]

I'm having this issue as well (even if I use 'MesloLGS NF' in the Terminal > Font Family setting), and using the Lean style for VS Code as a workaround:

if [[ "$TERM_PROGRAM:l" = vscode* ]]; then
  . ~/.p10k.vscode.zsh
else
  . ~/.p10k.zsh
fi

then copy the file, restart the VS Code terminal, and verify the config file & reconfigure:

echo $TERM_PROGRAM # Should be vscode
echo $POWERLEVEL9K_CONFIG_FILE # Shoulc be /Users/.../.p10k.vscode.zsh
p10k configure

[sono-T]

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

Perfect!

[luispuerto]

Great thanks!

Just a comment here, but if you are using the fonts downloaded from homebrew, which are nice since you get updates, you need to write there MesloLGS Nerd Font Mono for example.

[romkatv]

Just a comment here, but if you are using the fonts downloaded from homebrew, which are nice since you get updates, you need to write there MesloLGS Nerd Font Mono for example.

This indicates you are using a different font, not the recommended one. If you download the recommended font from any source (including homebrew: brew tap homebrew/cask-fonts && brew install font-meslo-for-powerlevel10k), the name of the font will be "MesloLGS NF".

[luispuerto]

Cask fonts has been deprecated https://github.com/Homebrew/homebrew-cask-fonts

I'm using the cask https://github.com/Homebrew/homebrew-cask/blob/HEAD/Casks/font/font-m/font-meslo-lg-nerd-font.rb

brew info font-meslo-lg-nerd-font

[romkatv]

My comment still stands. If you install the recommended font from any source, its name will be "MesloLGS NF". If your font has a different name, it's a different font.

[luispuerto]

Can you tell me what I'm doing wrong when the creator of the font is recommending using the installation method I use? https://github.com/ryanoasis/nerd-fonts?tab=readme-ov-file#option-2-homebrew-fonts

In other words, If you use the regular homebrew install, if you're using homebrew, most probable patch, you are going to have that name. I'm not stating that there is wrong or right… but that the name could be different.

PS/ just clarifying that the name could be different depending on the install you have would be nice.

[romkatv]

Different fonts have different names. The recommended font is called "MesloLGS NF". You've installed a different font, which naturally has a different name.

Can you tell me what I'm doing wrong

If your goal was to install "MesloLGS Nerd Font Mono", you aren't doing anything wrong. If your goal was to install "MesloLGS NF" (the font that powerlevel10k recommends), then your mistake was installing a different font.

[luispuerto]

As far as I understand you need to use a mono font on terminal. Visual Studio Code was not allowing me to use the non mono one, which I also have installed.

[romkatv]

That may be true but my point still stands.

[KarstenVogt]

This is what I did:

• Go to https://www.nerdfonts.com/font-downloads, download font and copy its name (above the abcdef...) to the clipboard.

• Install the font

• In VS Code: File -> Preferences -> Settings. Edit the settings.json file: add/edit:
  "editor.fontFamily": "'$PasteYourCopiedNamehere'",
  "editor.fontSize": 13,
  "editor.fontLigatures": true

  For me it was:
  "editor.fontFamily": "'JetBrainsMono Nerd Font'",
  "editor.fontSize": 13,
  "editor.fontLigatures": true

  Mind the double and single quotes. "'...'"

• Restart VSCode

• Profit.

[romkatv]

@KarstenVogt #671 (comment)

[TobyDS]

Cause of issue (when using iTerm2)

In my case, this was happening because I was using iTerm 2 as my terminal application, which has a set of fallback glyphs available by default, so some glyphs I thought were coming from my Nerd Font were actually provided by a backup set of powerline glyphs. The solution is to add the recommended font as a backup so that VSCode will look for any glyphs it can't find in the main font in the backup font instead. This will provide the missing glyphs in the same way that iTerm does by default.

Example Solution

I changed the following setting in my VSCode settings.json

From:

"terminal.integrated.fontFamily": "'FiraCode Nerd Font'",

To:

"terminal.integrated.fontFamily": "'FiraCode Nerd Font','MesloLGS NF', monospace",

Note: This does require you to have installed the 'MesloLGS NF' font provided by powerline10k

[savakazakov]

For all those with a different problem like me:

Problem:

I was encountering an issue where my ZSH prompt configuration (powerlevel10k) was not applied when running the ZSH shell in the VSCode integrated terminal, even though the setup worked fine in iTerm2. The primary symptom was that the custom ZSH theme (powerlevel10k) and plugin setup seemed to be ignored, resulting in a basic prompt when using VSCode.

Cause of the Problem:

The primary source of the issue was that fact that a long time ago I followed oh-my-zsh's recommendations and I split my zsh init processes in a bunch of .zsh files and symlinked all to a dotfiles repo. Namely, I had the following crucial line:

ZSH_THEME="powerlevel10k/powerlevel10k"

in a file called misc.zsh found somewhere under ~/.oh-my-zsh/custom/ like they recommend in their documentation (they load all extra .zsh files so you can organise them however you want)

Finally I had the following in my .zshrc:

if [[ "$ITERM_PROFILE" ]]; then
  # Load Powerlevel10k and Oh-My-Zsh configuration here...

This caused VSCode's integrated terminal to skip loading the oh-my-zsh configuration because the environment variable ITERM_PROFILE is specific to iTerm2 and was not set when using VSCode’s terminal. As a result, oh-my-zsh and the powerlevel10k theme were not initialized in VSCode.

However, since the conditional block in .zshrc was skipped in VSCode, the theme variable from misc.zsh was never loaded.

---

Solution:

Simply add to the .zshrc logic.

if [[ "$TERM_PROGRAM" == "vscode" || "$ITERM_PROFILE" ]]; then