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!

[talves]

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

[musicislife727]

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

[romkatv]

@musicislife727 Open a separate issue.

[braindotai]

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

[TannerBaldus]

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

[swaroopRajwal]

2056

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

[romkatv]

2056

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

I'm positive that the official instructions work.

[swaroopRajwal]

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

[carlosferrerdev]

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

[zegezs]

is perfect for my vs

[Nick-Z0]

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

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]

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

[viky293]

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.

[curbengh]

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

[souvik666]

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

[rajaduraicloud]

Worked in ubuntu 22.04 [jammy jelly]

[JoeNormyl]

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]

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

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!

[romkatv]

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]

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

[JoeNormyl]

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]

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?

[romkatv]

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.

[wiraki]

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?

[romkatv]

Yes, VSCode supports fallback fonts.

[skgandikota]

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

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]

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

[romkatv]

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

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

[Remkovanlaarhoven]

MesloLGS

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

[romkatv]

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.

[jendahorak]

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]

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!