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

Bluefin
1

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

image
image693Ɨ473 46.1 KB

And here with Ubuntu Mono Regular

image
image693Ɨ473 45.9 KB

2

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.

3

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:

image
image733Ɨ473 42.2 KB

4

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

5

Is the font a TTF or OTF font?
If itā€™s OTF try a TTF font.

6

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:

vscode-nerdfonts
vscode-nerdfonts1237Ɨ2037 173 KB

7

Hereā€™s some examples of ligatures for coding.

IMG_0997

8

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

9

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.

10

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:

11

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

12

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.

13

Brilliant!
This worked for me

image
image1423Ɨ1023 100 KB