How to Find Locally Installed Fonts

Garbled Characters in VSCode Terminal

I am building my environment using Starship.
Since Starship uses Nerd Fonts, if your environment doesn't support them, symbols like  below might appear garbled, right?

 ╭─me@xps in repo: articles on  master [?⇡1] via  v14.18.0 took 0s
 ╰─λ 

To add Nerd Fonts to VSCode, it seems necessary to check the local fonts.

• Garbled Characters in VSCode Terminal
• Environment
• Solution
  • Checking Local Fonts with fc-list
  • Tips: Japanese Support
• References

Environment

• OS: Arch Linux (The steps here are applicable to Linux in general)

Solution

Checking Local Fonts with fc-list

The fc-list command outputs all fonts available on the local system.
Searching for the desired font with grep looks like this:

$ fc-list | grep Nerd
/usr/share/fonts/TTF/Iosevka Term Bold Nerd Font Complete.ttf: Iosevka Term,Iosevka Nerd Font:style=Bold
/usr/share/fonts/TTF/Iosevka Extralight Oblique Nerd Font Complete Mono.ttf: Iosevka,Iosevka Nerd Font Mono:style=Extralight Oblique,Regular
/usr/share/fonts/TTF/Iosevka Term Extralight Nerd Font Complete Mono.ttf: Iosevka Term,Iosevka Nerd Font Mono:style=Extralight,Regular
/usr/share/fonts/TTF/Iosevka Term Thin Italic Nerd Font Complete.ttf: Iosevka Term,Iosevka Nerd Font:style=Thin Italic,Italic
/usr/share/fonts/TTF/Iosevka Heavy Nerd Font Complete Mono.ttf: Iosevka,Iosevka Nerd Font Mono:style=Heavy,Regular
...
/usr/share/fonts/TTF/Iosevka Term Thin Oblique Nerd Font Complete.ttf: Iosevka Term,Iosevka Nerd Font:style=Thin Oblique,Regular
/usr/share/fonts/TTF/Iosevka Term Medium Oblique Nerd Font Complete Mono.ttf: Iosevka Term,Iosevka Nerd Font Mono:style=Medium Oblique,Regular
/usr/share/fonts/TTF/Iosevka Bold Italic Nerd Font Complete.ttf: Iosevka,Iosevka Nerd Font:style=Bold Italic
/usr/share/fonts/TTF/Iosevka Medium Nerd Font Complete Mono.ttf: Iosevka,Iosevka Nerd Font Mono:style=Medium,Regular

When specifying a font in VSCode or CSS, you use the label following the colon (:).
In this case:

/usr/share/fonts/TTF/Iosevka Thin Oblique Nerd Font Complete.ttf: Iosevka,ccccc:style=Thin Oblique,Regular

Since it is listed this way, I specified Iosevka Nerd Font in the VSCode settings.
→ settings.json

{
  ...
  "editor.fontFamily": "'Fira Code', 'Source Code Pro', 'Source Han Code JP', monospace, 'Iosevka Nerd Font'", // ← Added
  ...
}

Tips: Japanese Support

If you want to add Japanese fonts,

fc-list :lang=ja

you can search for Japanese fonts using this command.

References

Arch Wiki - Font#Tips and tricks
https://atmarkit.itmedia.co.jp/ait/articles/1812/07/news021.html
https://github.com/microsoft/vscode/issues/81497