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

JoeNormyl · 2020-04-29T03:00:11Z

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!

The text was updated successfully, but these errors were encountered:

romkatv · 2020-04-29T07:19:40Z

Download these four ttf files:
Double-click on each file and click "Install". This will make MesloLGS NF font available to all applications on your system.
Open Settings in Visual Studio Code.
- On PC: press Ctrl+, or click File → Preferences → Settings.
- On Mac: press ⌘ , or click Code → Preferences → Settings.
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 · 2020-05-06T13:27:18Z

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

romkatv · 2020-05-06T13:29:06Z

@sortega The instructions in my previous comment should work: #671 (comment)

sortega · 2020-05-06T13:32:12Z

You are 100% correct

rahulreghunath · 2020-09-12T15:12:50Z

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

romkatv · 2020-09-16T09:43:00Z

@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 · 2020-10-31T04:39:27Z

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

AdamSchinzel · 2021-01-02T22:37:20Z

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

barakharyati · 2021-03-03T19:36:23Z

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 · 2021-05-03T03:59:45Z

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

Mario-paul · 2021-08-18T20:02:08Z

@sortega The instructions in my previous comment should work: #671 (comment)

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

sylvain-gdk · 2021-09-02T19:43:43Z

@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 · 2021-09-03T08:34:56Z

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 · 2021-09-12T02:15:43Z

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

HarishChandran3304 · 2021-09-12T21:23:38Z

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 · 2021-09-12T21:29:09Z

@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 · 2021-09-12T21:32:48Z

@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 · 2021-09-12T21:34:38Z

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

HarishChandran3304 · 2021-09-12T21:36:09Z

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

Inside the usr/share folder

romkatv · 2021-09-13T05:58:28Z

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

Inside the usr/share folder

Please be more specific.

HarishChandran3304 · 2021-09-13T06:23:52Z

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 · 2021-09-13T06:30:18Z

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 · 2021-09-13T07:51:20Z

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 · 2021-09-13T08:01:07Z

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 · 2021-09-13T08:20:24Z

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 · 2021-09-30T22:28:49Z

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

romkatv · 2021-10-01T15:30:56Z

@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 · 2021-10-01T15:33:05Z

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

jendahorak · 2023-08-14T12:17:44Z

Had the same problem but with: Cascadia Code
When set the: "terminal.integrated.fontFamily": "CaskaydiaCove Nerd Font"
It worked.

TLDR: Have to pul full name of the font.

jbthecoder5 · 2023-08-28T19:50:53Z

Download these four ttf files:

MesloLGS NF Regular.ttf

MesloLGS NF Bold.ttf

MesloLGS NF Italic.ttf

MesloLGS NF Bold Italic.ttf

Double-click on each file and click "Install". This will make MesloLGS NF font available to all applications on your system.

Open Settings in Visual Studio Code.

On PC: press Ctrl+, or click File → Preferences → Settings.

On Mac: press ⌘ , or click Code → Preferences → Settings.

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 · 2023-09-28T00:46:19Z

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 · 2023-09-28T05:30:20Z

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

Orrimp · 2023-11-21T09:27:46Z

I installed my Nerd Font with Homebrew and hat to put

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

romkatv · 2023-11-21T09:29:49Z

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 · 2023-12-01T00:16:51Z

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 · 2024-01-10T13:52:29Z

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 · 2024-01-14T05:36:58Z

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 · 2024-01-14T06:14:20Z

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

romkatv · 2024-01-14T06:20:23Z

@Welding-Torch Try following the instructions very carefully.

Welding-Torch · 2024-01-14T08:29:03Z

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

Can someone recommend a fix?

romkatv · 2024-01-14T08:30:44Z

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

tehpsalmist · 2024-03-20T15:08:11Z

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

Yeshey · 2024-04-17T20:44:36Z

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 · 2024-04-17T21:04:59Z

You spelled FiraCode as FuraCode

Yeshey · 2024-04-26T19:12:56Z

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 · 2024-05-22T16:29:25Z

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 · 2024-05-23T02:29:49Z

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

Perfect!

luispuerto · 2024-06-13T07:01:03Z

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 · 2024-06-13T07:05:28Z

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 · 2024-06-13T07:08:14Z

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 · 2024-06-13T07:09:53Z

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 · 2024-06-13T07:12:53Z

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 · 2024-06-13T07:20:17Z

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 · 2024-06-13T07:24:38Z

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 · 2024-06-13T07:27:15Z

That may be true but my point still stands.

KarstenVogt · 2024-07-01T10:47:22Z

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 · 2024-07-01T10:49:06Z

@KarstenVogt #671 (comment)

TobyDS · 2024-07-13T15:16:20Z

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

romkatv closed this as completed Apr 29, 2020

paulroth3d mentioned this issue Jul 10, 2021

Custom font support - like for powerlevel10k? isontheline/pro.webssh.net#339

Closed

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

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

Comments

JoeNormyl commented Apr 29, 2020

romkatv commented Apr 29, 2020 • edited Loading

sortega commented May 6, 2020

romkatv commented May 6, 2020 • edited Loading

sortega commented May 6, 2020

rahulreghunath commented Sep 12, 2020 • edited Loading

romkatv commented Sep 16, 2020 • edited Loading

steveninouye commented Oct 31, 2020 • edited Loading

AdamSchinzel commented Jan 2, 2021

barakharyati commented Mar 3, 2021

gatham01 commented May 3, 2021

Mario-paul commented Aug 18, 2021 • edited by romkatv Loading

sylvain-gdk commented Sep 2, 2021 • edited Loading

romkatv commented Sep 3, 2021

ozzbetto commented Sep 12, 2021

HarishChandran3304 commented Sep 12, 2021

romkatv commented Sep 12, 2021

HarishChandran3304 commented Sep 12, 2021 • edited Loading

romkatv commented Sep 12, 2021

HarishChandran3304 commented Sep 12, 2021

romkatv commented Sep 13, 2021

HarishChandran3304 commented Sep 13, 2021

romkatv commented Sep 13, 2021

HarishChandran3304 commented Sep 13, 2021

HarishChandran3304 commented Sep 13, 2021

romkatv commented Sep 13, 2021

chrisdemars commented Sep 30, 2021

romkatv commented Oct 1, 2021

chrisdemars commented Oct 1, 2021

jendahorak commented Aug 14, 2023

jbthecoder5 commented Aug 28, 2023

lef-fan commented Sep 28, 2023

romkatv commented Sep 28, 2023

Orrimp commented Nov 21, 2023

romkatv commented Nov 21, 2023

dcodeu commented Dec 1, 2023

Welding-Torch commented Jan 10, 2024

amirhajif commented Jan 14, 2024

Welding-Torch commented Jan 14, 2024

romkatv commented Jan 14, 2024

Welding-Torch commented Jan 14, 2024

romkatv commented Jan 14, 2024 • edited Loading

tehpsalmist commented Mar 20, 2024

Yeshey commented Apr 17, 2024

Welding-Torch commented Apr 17, 2024

Yeshey commented Apr 26, 2024

halilim commented May 22, 2024 • edited Loading

sono-T commented May 23, 2024

luispuerto commented Jun 13, 2024

romkatv commented Jun 13, 2024

luispuerto commented Jun 13, 2024 • edited Loading

romkatv commented Jun 13, 2024

luispuerto commented Jun 13, 2024 • edited Loading

romkatv commented Jun 13, 2024

luispuerto commented Jun 13, 2024

romkatv commented Jun 13, 2024

KarstenVogt commented Jul 1, 2024 • edited Loading

romkatv commented Jul 1, 2024

TobyDS commented Jul 13, 2024

Cause of issue (when using iTerm2)

Example Solution

romkatv commented Apr 29, 2020 •

edited

Loading

romkatv commented May 6, 2020 •

edited

Loading

rahulreghunath commented Sep 12, 2020 •

edited

Loading

romkatv commented Sep 16, 2020 •

edited

Loading

steveninouye commented Oct 31, 2020 •

edited

Loading

Mario-paul commented Aug 18, 2021 •

edited by romkatv

Loading

sylvain-gdk commented Sep 2, 2021 •

edited

Loading

HarishChandran3304 commented Sep 12, 2021 •

edited

Loading

romkatv commented Jan 14, 2024 •

edited

Loading

halilim commented May 22, 2024 •

edited

Loading

luispuerto commented Jun 13, 2024 •

edited

Loading

luispuerto commented Jun 13, 2024 •

edited

Loading

KarstenVogt commented Jul 1, 2024 •

edited

Loading