Solved Rendering Glyphs with VSCODE, what is the trick?
#1
I looked up and down in the marketplace, tried multiple extensions, used ChatGPT, and I can't for the life of me figure out how to get VSCODE to show the glyph in use within the editor label line.

Is there an extension or setting that someone can point out to me, it is very annoying to have to use Font studio to see a large version of the Glyph in my font file I'm looking for, use charmap to select it for use and then have to paste it into the code only to have VSCODE just show some obtuse "square" because it is to stupid to render it. I don't want to use the native formatting either as it is unintuitive and other editors, hell even notepad++ renders them correctly.

I have the font that it uses installed in the windows fonts folder, I have it set as a font fallback... but nothing seems to work.

Please tell me I'm missing something simple?

Image

Image

Thank you,
Chris
Kodi: Nexus v20.5 | Skin Dev: Madnox Omega/Nexus: v20.01.02 | Madnox ForumRoot | Madnox Repov1.0.09 | Mr. V'sSource | Kodi Texture Tool (Takeover): v3.0.1 | Batch Texture Resize (Irfanview): Tutorial
Working On
: Replacing Embuary >> TMDB Helper || Start: 6/3/2024 End: God knows || Status Complete: Movies: 10% TV Shows: 0% Music: 0%
Reply
#2
I use the bootstrap-icon font in my skin and in VSCode, Mac version,  I just add the font to the end of the Editor: Font Family list and it works great.

Image


Image
Reply
#3
I just tried under Windows and it also works but beware if your font name contains spaces then is must be surrounded by single quotes:-

Image
Image
Reply
#4
I took a look, those bootstrap-icon load because they are svg, I think the issue may lie within my fonts are .ttf?

The two fonts in question are:
  • MaterialDesignIcons.ttf
  • MaterialIcons-Regular.ttf
I can see them in font studio, fontforge, and of course they render in the skin as they should, it's just vscode is tell me to go pound sand and won't render them at all. I don't get it.
Kodi: Nexus v20.5 | Skin Dev: Madnox Omega/Nexus: v20.01.02 | Madnox ForumRoot | Madnox Repov1.0.09 | Mr. V'sSource | Kodi Texture Tool (Takeover): v3.0.1 | Batch Texture Resize (Irfanview): Tutorial
Working On
: Replacing Embuary >> TMDB Helper || Start: 6/3/2024 End: God knows || Status Complete: Movies: 10% TV Shows: 0% Music: 0%
Reply
#5
(2024-07-12, 16:28)kittmaster Wrote: I took a look, those bootstrap-icon load because they are svg, I think the issue may lie within my fonts are .ttf?

While bootstrap-icons are available as svg's the version I use is a ttf font, I know because I use it in my Kodi skin and Kodi doesn't support svg's at all. Plus my second post shows me using the Font Awsome ttf font icons.

But here you go... Using MaterialIcons-Regular.ttf

Image

Image

When adding the font to VSCode's font list you need to use the name of the font as listed in "Character Map" NOT the filename.

Image

Where are you setting the font in VSCode? Post a screenshot of VSCode's setting Editor: Font Family
Reply
#6
(2024-07-12, 17:37)roidy Wrote:
(2024-07-12, 16:28)kittmaster Wrote: I took a look, those bootstrap-icon load because they are svg, I think the issue may lie within my fonts are .ttf?

While bootstrap-icons are available as svg's the version I use is a ttf font, I know because I use it in my Kodi skin and Kodi doesn't support svg's at all. Plus my second post shows me using the Font Awsome ttf font icons.

But here you go... Using MaterialIcons-Regular.ttf

Image

Image

When adding the font to VSCode's font list you need to use the name of the font as listed in "Character Map" NOT the filename.

Image

Where are you setting the font in VSCode? Post a screenshot of VSCode's setting Editor: Font Family

Pure Genius. THANK YOU!!!

That was driving me bonkers!

Onto the next conquest.

Greetz!
Kodi: Nexus v20.5 | Skin Dev: Madnox Omega/Nexus: v20.01.02 | Madnox ForumRoot | Madnox Repov1.0.09 | Mr. V'sSource | Kodi Texture Tool (Takeover): v3.0.1 | Batch Texture Resize (Irfanview): Tutorial
Working On
: Replacing Embuary >> TMDB Helper || Start: 6/3/2024 End: God knows || Status Complete: Movies: 10% TV Shows: 0% Music: 0%
Reply
#7
(2024-07-12, 18:36)kittmaster Wrote: Pure Genius. THANK YOU!!!

That was driving me bonkers!

Onto the next conquest.

Greetz!

Glad you sorted it..... What was the problem, just the font name?
Reply
#8
(2024-07-12, 18:42)roidy Wrote:
(2024-07-12, 18:36)kittmaster Wrote: Pure Genius. THANK YOU!!!

That was driving me bonkers!

Onto the next conquest.

Greetz!

Glad you sorted it..... What was the problem, just the font name?

TL:DR Yes; Font Name was the issue.

I used the actual font filename.ttf as I thought I read on "The Google" somewhere to add the filename and I was all over on what to call it: Font file, Glyphs, unicode preview etc etc.

When I read to add the name to the settings.json, I did, I read it as a literal thinking of it as a global variable thing and since I installed it as a windows font itself, I figured adding the filename should have done it.

Your recommendation of the actual "Font Name" (i.e. Character Map view of it) and not knowing the single quote issue of white space in the Font Name requirement were the keys to success.
Kodi: Nexus v20.5 | Skin Dev: Madnox Omega/Nexus: v20.01.02 | Madnox ForumRoot | Madnox Repov1.0.09 | Mr. V'sSource | Kodi Texture Tool (Takeover): v3.0.1 | Batch Texture Resize (Irfanview): Tutorial
Working On
: Replacing Embuary >> TMDB Helper || Start: 6/3/2024 End: God knows || Status Complete: Movies: 10% TV Shows: 0% Music: 0%
Reply

Logout Mark Read Team Forum Stats Members Help
Rendering Glyphs with VSCODE, what is the trick?0