How does one enable Nerd Fonts display in VS Code integrated terminal?

The integrated terminal in VS Code has the same colouring, just not the fancy fonts that Ptyxis has. I turned on font ligatures in settings.json but that only seems to affect the editor. Anyone know how to make this look better?

Here it is with Cascadia Code

And here with Ubuntu Mono Regular

Could you specify exactly what it is that you want improved, please? I was under the impression that ligature only affected characters in script fonts or that were otherwise connecting characters together. Eg, æ. Since I don’t see any ligatures in the captured texts, I don’t know what to look for to spot the change caused by the settings.

Are you instead after improved kerning, so the text looks less blocky? I have seen terminals running fonts that weren’t monospace before, but the artifacts you get tend to be worse than any improvement in legibility. Like, all the tables in your example would become very wonky.

I think its the nerd font icons that aren’t displaying in the VS Code terminal. The font display is great, however, the VS Code terminal just shows boxes for the the nerd font icons. Here is the Ptyxis terminal prompt:

2 Likes

@MaxJanky do you know how to get nerd fonts to display in VS Code terminal? Ptyxis is doing it and I’m not sure how since I am just using the stock config with Bluefin Bling enabled.

Is the font a TTF or OTF font?
If it’s OTF try a TTF font.

1 Like

I have some experience with fonts, but this is the first time I’ve ever heard the phrase “nerd font.” That said, when I typed “nerd font vscode” into Google this was the first hit:

Nerd Fonts work the same and typically have a " NF" suffix, the following is an example of how to configure Hack’s nerd fonts variant:

"terminal.integrated.fontFamily": "'Hack NF'"

So, I recommend you try something like this:

mkdir -p ~/.local/share/fonts
ln -s ~/.local/share/fonts/ ~/.fonts
cd ~/.fonts 
curl -OL https://github.com/ryanoasis/nerd-fonts/releases/latest/download/Hack.tar.xz
tar -xvf Hack.tar.xz

Then, go into vscode → settings → search → “editor: font family” (if you want access in the editor) or “terminal.integrated.fontFamily” (if you only want the terminal) and append “, ‘Hack Nerd Font’”. Lastly, you’ll evidently have to disable hardware acceleration in the terminal and it might be a good idea to double-check that your terminal settings enable glyphs - both settings are on the same page.

Bob’s your uncle:

1 Like

Here’s some examples of ligatures for coding.

IMG_0997

1 Like

Do we need to set the font in vscode to be a nerd font so it looks right ootb?

1 Like

I would personally prefer having the hardware acceleration than some emoticons that I didn’t even notice weren’t being displayed. But I am half-blind and tend to use pretty utilitarian themes, so YMMV.

Thanks @MaxJanky I ended up using Embellish from Flathub to install the Hack Nerd font you suggested. Then I set Terminal > Integrated: Font Family to ‘Hack Nerd Font’. I did not have to disable gpu acceleration to enable this. Now I get the nerd font icons :slight_smile:

I think it would be a nice touch for the integrated terminal.

1 Like

Ah. I just reviewed the terminal options and I think I probably just misread one of the options in haste earlier. It’s funny: the bit about images says it will only work when GPU is enabled. But the bit about glyphs says it will not work when GPU is disabled. A punishing lack of consistency for a speed-reader!

That’s my story and I’m stickin’ to it.

Brilliant!
This worked for me

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.