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

Question

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

JoeNormyl opened this issue 4 years ago · comments

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!

Roman Perepelitsa · Answer 1 · Wed Apr 29 2020 15:19:40 GMT+0800 (China Standard Time)

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

Sebastián Ortega · Answer 2 · Wed May 06 2020 21:27:18 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 3 · Wed May 06 2020 21:29:06 GMT+0800 (China Standard Time)

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

Sebastián Ortega · Answer 4 · Wed May 06 2020 21:32:12 GMT+0800 (China Standard Time)

You are 100% correct

Rahul Reghunath · Answer 5 · Sat Sep 12 2020 23:12:50 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 6 · Wed Sep 16 2020 17:43:00 GMT+0800 (China Standard Time)

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

Steven Inouye · Answer 7 · Sat Oct 31 2020 12:39:27 GMT+0800 (China Standard Time)

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

0xadams.eth · Answer 8 · Sun Jan 03 2021 06:37:20 GMT+0800 (China Standard Time)

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

barakharyati · Answer 9 · Thu Mar 04 2021 03:36:23 GMT+0800 (China Standard Time)

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

Mohan Gathala · Answer 10 · Mon May 03 2021 11:59:45 GMT+0800 (China Standard Time)

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

Mario Cardenas · Answer 11 · Thu Aug 19 2021 04:02:08 GMT+0800 (China Standard Time)

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

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

Sylvain Goedike · Answer 12 · Fri Sep 03 2021 03:43:43 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 13 · Fri Sep 03 2021 16:34:56 GMT+0800 (China Standard Time)

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.

Betto Rodriguez · Answer 14 · Sun Sep 12 2021 10:15:43 GMT+0800 (China Standard Time)

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

Harish Chandran · Answer 15 · Mon Sep 13 2021 05:23:38 GMT+0800 (China Standard Time)

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.

Roman Perepelitsa · Answer 16 · Mon Sep 13 2021 05:29:09 GMT+0800 (China Standard Time)

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

Harish Chandran · Answer 17 · Mon Sep 13 2021 05:32:48 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 18 · Mon Sep 13 2021 05:34:38 GMT+0800 (China Standard Time)

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

Harish Chandran · Answer 19 · Mon Sep 13 2021 05:36:09 GMT+0800 (China Standard Time)

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

Inside the usr/share folder

Roman Perepelitsa · Answer 20 · Mon Sep 13 2021 13:58:28 GMT+0800 (China Standard Time)

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

Inside the usr/share folder

Please be more specific.

Harish Chandran · Answer 21 · Mon Sep 13 2021 14:23:52 GMT+0800 (China Standard Time)

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:

Roman Perepelitsa · Answer 22 · Mon Sep 13 2021 14:30:18 GMT+0800 (China Standard Time)

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'

Harish Chandran · Answer 23 · Mon Sep 13 2021 15:51:20 GMT+0800 (China Standard Time)

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!

Harish Chandran · Answer 24 · Mon Sep 13 2021 16:01:07 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 25 · Mon Sep 13 2021 16:20:24 GMT+0800 (China Standard Time)

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.

Chris DeMars · Answer 26 · Fri Oct 01 2021 06:28:49 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 27 · Fri Oct 01 2021 23:30:56 GMT+0800 (China Standard Time)

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

Chris DeMars · Answer 28 · Fri Oct 01 2021 23:33:05 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 29 · Fri Oct 01 2021 23:37:09 GMT+0800 (China Standard Time)

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?

Chris DeMars · Answer 30 · Fri Oct 01 2021 23:38:03 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 31 · Fri Oct 01 2021 23:40:01 GMT+0800 (China Standard Time)

I am using "MesloGS NF"

The correct name is "MesloLGS NF".

Chris DeMars · Answer 32 · Sat Oct 02 2021 00:03:28 GMT+0800 (China Standard Time)

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

Marcos Gómez · Answer 33 · Wed Oct 13 2021 15:08:22 GMT+0800 (China Standard Time)

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

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

Benji · Answer 34 · Thu Nov 25 2021 23:47:32 GMT+0800 (China Standard Time)

@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

seifoo · Answer 35 · Thu Dec 23 2021 15:01:38 GMT+0800 (China Standard Time)

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 · Answer 36 · Wed Jan 26 2022 00:28:32 GMT+0800 (China Standard Time)

It Worked Thanks...

Shubham Agrawal · Answer 37 · Tue Feb 08 2022 03:51:24 GMT+0800 (China Standard Time)

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

David Stanek · Answer 38 · Wed Mar 09 2022 23:29:29 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 39 · Wed Mar 09 2022 23:34:29 GMT+0800 (China Standard Time)

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

Johann Bandelow · Answer 40 · Fri Mar 25 2022 23:13:53 GMT+0800 (China Standard Time)

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

Étienne BERSAC · Answer 41 · Mon Mar 28 2022 22:17:08 GMT+0800 (China Standard Time)

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

Antonio Nesic · Answer 42 · Mon May 02 2022 16:22:30 GMT+0800 (China Standard Time)

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 · Answer 43 · Fri May 06 2022 04:22:17 GMT+0800 (China Standard Time)

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

Aernila · Answer 44 · Thu May 12 2022 08:56:17 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 45 · Thu May 12 2022 14:39:50 GMT+0800 (China Standard Time)

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

tonmoymojumder · Answer 46 · Wed May 18 2022 14:38:18 GMT+0800 (China Standard Time)

Follow Romkatv!! He is correct

Federico Capaldo · Answer 47 · Wed Jun 08 2022 06:40:31 GMT+0800 (China Standard Time)

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:

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
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.
Open you terminal in VSCode with Ctrl + Backquote or from the menu, and it should all work now.

Vũ Xuân Thụ · Answer 48 · Thu Jun 09 2022 11:15:51 GMT+0800 (China Standard Time)

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

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

Aernila · Answer 49 · Thu Jun 09 2022 20:28:46 GMT+0800 (China Standard Time)

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!

Rodrigo Nascimento · Answer 50 · Sat Jun 11 2022 12:02:57 GMT+0800 (China Standard Time)

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

Tony Alves · Answer 51 · Wed Jun 22 2022 00:12:53 GMT+0800 (China Standard Time)

When using WSL (2), I also had to set the font in the Remote terminal as well as the User.

musicislife727 · Answer 52 · Sat Jul 02 2022 07:13:02 GMT+0800 (China Standard Time)

For some reason my aws profile (really right prompt elements) will not display in some directories. Has anyone else ran into this issue? Is there something I need to enable for this to work for all of my directories?

For context, in ,p10.zsh I also have typeset -g POWERLEVEL9K_AWS_SHOW_ON_COMMAND='aws|awless|terraform|pulumi|terragrunt' commented

Roman Perepelitsa · Answer 53 · Mon Jul 04 2022 00:53:43 GMT+0800 (China Standard Time)

@musicislife727 Open a separate issue.

Rishik Mourya · Answer 54 · Mon Jul 11 2022 11:18:46 GMT+0800 (China Standard Time)

Just commenting to thank everyone in this thread, you guys are real heroes :)

P.S. after changing the font settings in vscode don't forget to restart it

Tanner Baldus · Answer 55 · Fri Jul 22 2022 03:09:33 GMT+0800 (China Standard Time)

@seifolah-ghaderi found the bg image https://blog.camposanto.com/post/138965082204/firewatch-launch-wallpaper-when-we-redid-the

Swaroop Jaikumar Rajwal · Answer 56 · Wed Oct 12 2022 17:29:57 GMT+0800 (China Standard Time)

#2056
Maybe this should work for Linux users 🤷🏻‍♂️

Roman Perepelitsa · Answer 57 · Wed Oct 12 2022 17:45:58 GMT+0800 (China Standard Time)

#2056
Maybe this should work for Linux users 🤷🏻‍♂️

I'm positive that the official instructions work.

Swaroop Jaikumar Rajwal · Answer 58 · Wed Oct 12 2022 18:08:13 GMT+0800 (China Standard Time)

#2056
Maybe this should work for Linux users 🤷🏻‍♂️

I'm positive that the official instructions work.

Yeah it does work but in many distributions, there's no default installed application to install .ttf files

Carlos Ferrer · Answer 59 · Mon Oct 24 2022 23:07:18 GMT+0800 (China Standard Time)

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

浮丘 · Answer 60 · Thu Oct 27 2022 11:43:19 GMT+0800 (China Standard Time)

is perfect for my vs

NS Papanikolaou · Answer 61 · Tue Nov 15 2022 02:23:41 GMT+0800 (China Standard Time)

@seifolah-ghaderi Here is the wallpaper you asked for.

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

Yuri Lima · Answer 62 · Sat Nov 19 2022 21:52:02 GMT+0800 (China Standard Time)

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

Just a little update
terminal.integrated.defaultProfile.osx instead of terminal.integrated.shell.osx

tpkee · Answer 63 · Sun Dec 04 2022 19:09:04 GMT+0800 (China Standard Time)

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"

I'm using Arch + Gnome 43 + Nerd fonts complete from the AUR, this works for me too

Vikram · Answer 64 · Mon Dec 05 2022 22:14:22 GMT+0800 (China Standard Time)

p10k configure

Easiest one, I had been trying lot of stuff earlier. The problem with these things is that you have to be invested to understand what piece is responsible for what.

Ming Di Leom · Answer 65 · Fri Jan 27 2023 19:26:00 GMT+0800 (China Standard Time)

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"

I'm using Arch + Gnome 43 + Nerd fonts complete from the AUR, this works for me too

Any nerd font should work, not just Meslo or Noto. otf-cascadia-code-nerd which provides 'CaskaydiaCove Nerd Font' also works for me.

Tried p10k configure, prompted twice and I can't see the lock icon before installing NF. It's still useful to run it with NF to fix icon spacing (the cross overlapping step).

souvik dutta · Answer 66 · Sun Jan 29 2023 15:45:44 GMT+0800 (China Standard Time)

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

Rajadurai M · Answer 67 · Tue Jan 31 2023 13:26:20 GMT+0800 (China Standard Time)

Worked in ubuntu 22.04 [jammy jelly]

JoeNormyl · Answer 68 · Wed Feb 01 2023 03:39:28 GMT+0800 (China Standard Time)

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

Thanks, I spent probably way too much time setting it up to look pretty. It was just a background image I found somewhere on what is apparently now called Dig Wallpapers It used to be called something else. For the iTerm theme colors, I started with "Earthsong" theme and then made some modifications. You can see some version of the original guide I followed here (Yes this is a freecodecamp walkthru). There's so many things you can do now so play around with it.

JoeNormyl · Answer 69 · Wed Feb 01 2023 05:00:12 GMT+0800 (China Standard Time)

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

First of all thank you for all your hard work on maintaining this codebase. I appreciate the time and energy. It's been years since I first posted this issue and after trying everything you have mentioned without success, I decided I would just deal. But I keep seeing the replies of others indicating they got it working so now I am determined I will do the same.

I have tried following the steps you mentioned. I reinstalled the fonts using the links you provided, made sure they show up in my font book, checked my vscode settings JSON and I have done everything you have recommended, but still my result is the same. I even tried some of the other fixes mentioned like adding
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.external.osxExec": "iTerm.app",

Anything else you can think of? The glyphs and font seem to work great on iTerm still. Thank you for your help!

Roman Perepelitsa · Answer 70 · Wed Feb 01 2023 05:04:33 GMT+0800 (China Standard Time)

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.

JoeNormyl · Answer 71 · Wed Feb 01 2023 05:21:33 GMT+0800 (China Standard Time)

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:

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

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.

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

JoeNormyl · Answer 72 · Wed Feb 01 2023 05:33:37 GMT+0800 (China Standard Time)

You are quite correct and thank you for your prompt reply despite my improper post. I was able to get it working it was an issue with VScode settings UI overwriting the JSON which has absolutely nothing to do with zsh or powerlevel10k. I imagine it is my heavy level of aesthetic customizations that started this whole thing. I mistakenly thought the issue was something else as I had been through every bit of documentation I could find on VScode trying but I should have known better. Hopefully anyone else having this issue after installing powerlevel10k on VScode. Thanks again for the sweet repo!

uforek · Answer 73 · Mon Mar 06 2023 08:34:30 GMT+0800 (China Standard Time)

So I cannot understand why in Gnome Terminal, my font (MonoLisa), renders all the icons correctly, but when I use the integrated terminal in VSCode, using the same font, the icons appear as boxes with an X through them ([X]). Is Gnome Terminal using multiple fonts somehow? Is VSCode bugged?

Roman Perepelitsa · Answer 74 · Mon Mar 06 2023 14:50:48 GMT+0800 (China Standard Time)

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.

WiriWiri · Answer 75 · Sat Apr 01 2023 00:53:10 GMT+0800 (China Standard Time)

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?

Roman Perepelitsa · Answer 76 · Sat Apr 01 2023 01:28:17 GMT+0800 (China Standard Time)

Yes, VSCode supports fallback fonts.

Saikoushik Gandikota · Answer 77 · Sun Apr 30 2023 09:32:39 GMT+0800 (China Standard Time)

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

First of all thank you for all your hard work on maintaining this codebase. I appreciate the time and energy. It's been years since I first posted this issue and after trying everything you have mentioned without success, I decided I would just deal. But I keep seeing the replies of others indicating they got it working so now I am determined I will do the same.

I have tried following the steps you mentioned. I reinstalled the fonts using the links you provided, made sure they show up in my font book, checked my vscode settings JSON and I have done everything you have recommended, but still my result is the same. I even tried some of the other fixes mentioned like adding "terminal.integrated.defaultProfile.osx": "zsh", "terminal.external.osxExec": "iTerm.app",

Anything else you can think of? The glyphs and font seem to work great on iTerm still. Thank you for your help!

Thanks for response, In Apple M1 Pro - Monterey OS it worked like a charm in the first step;

Remkovanlaarhoven · Answer 78 · Wed May 24 2023 17:08:45 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 79 · Wed May 24 2023 17:12:48 GMT+0800 (China Standard Time)

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

That's a different font. It's worse than MesloLGS NF.

Remkovanlaarhoven · Answer 80 · Wed May 24 2023 17:21:08 GMT+0800 (China Standard Time)

MesloLGS

Also MesloLGS NF did not work for me. But writing MesloLGS Nerd Font worked.

Roman Perepelitsa · Answer 81 · Wed May 24 2023 17:28:13 GMT+0800 (China Standard Time)

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.

shtrdl · Answer 82 · Mon Aug 14 2023 20:17:44 GMT+0800 (China Standard Time)

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.

JB · Answer 83 · Tue Aug 29 2023 03:50:53 GMT+0800 (China Standard Time)

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

Eleftherios Fanioudakis · Answer 84 · Thu Sep 28 2023 08:46:19 GMT+0800 (China Standard Time)

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"

Roman Perepelitsa · Answer 85 · Thu Sep 28 2023 13:30:20 GMT+0800 (China Standard Time)

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

Vitaliy Schreibmann · Answer 86 · Tue Nov 21 2023 17:27:46 GMT+0800 (China Standard Time)

I installed my Nerd Font with Homebrew and hat to put

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

Roman Perepelitsa · Answer 87 · Tue Nov 21 2023 17:29:49 GMT+0800 (China Standard Time)

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.

DJ Wilson · Answer 88 · Fri Dec 01 2023 08:16:51 GMT+0800 (China Standard Time)

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 · Answer 89 · Wed Jan 10 2024 21:52:29 GMT+0800 (China Standard Time)

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

amirhossein hajitabar · Answer 90 · Sun Jan 14 2024 13:36:58 GMT+0800 (China Standard Time)

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 · Answer 91 · Sun Jan 14 2024 14:14:20 GMT+0800 (China Standard Time)

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

Roman Perepelitsa · Answer 92 · Sun Jan 14 2024 14:20:23 GMT+0800 (China Standard Time)

@Welding-Torch Try following the instructions very carefully.

Welding Torch · Answer 93 · Sun Jan 14 2024 16:29:03 GMT+0800 (China Standard Time)

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

Can someone recommend a fix?

Roman Perepelitsa · Answer 94 · Sun Jan 14 2024 16:30:44 GMT+0800 (China Standard Time)

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

Ben Steward · Answer 95 · Wed Mar 20 2024 23:08:11 GMT+0800 (China Standard Time)

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

Yeshey · Answer 96 · Thu Apr 18 2024 04:44:36 GMT+0800 (China Standard Time)

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 · Answer 97 · Thu Apr 18 2024 05:04:59 GMT+0800 (China Standard Time)

You spelled FiraCode as FuraCode

Yeshey · Answer 98 · Sat Apr 27 2024 03:12:56 GMT+0800 (China Standard Time)

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