Using glyph names in Sketch


Very new to this world, but like others I’ve started using Glyphs to create an icon font. I’ve gotten as far as exporting my font and installation has gone well, however I’m trying to use the glyph name i.e. “delete” to improve workflow of icons in Sketch to no avail.

If each glyph is named, and used within a symbol, you can actually type an icons name into the override field and the icon updates:

This works perfectly well for other Icon fonts such as Material Icons, just can’t work out what’s missing in my icon font that stops this from working.

Any help would be greatly appreciated.

I would have to take a look into working OTFs. But it is very well possible that the names you can see there are not data stored inside the font.

Can you send us one if the font that you used to make the screenshot?

Unfortunately I can’t upload files here as I’m a new user, but try this link to download the Material Icon font that I’ve used in the example above.

This technique comes from a post on Medium:

“This won’t work for all fonts though. Only if the icon author has kindly named them.”

Glyphs automatically substitutes production names for encoded glyphs. If you have a glyph delete with the unicode E001 the final glyph name will be uniE001. You can try that in Sketch. To prevent that, you have two options. Check the Use custom names in Font Info > Others or manually assign a production name by selecting the glyph in font view and press cmd+opt+i and check the box at Production Name and type the name you like.

Thanks! All those options didn’t work :disappointed:

Could it be to do with the export options? I’ve tried both TTF and OTF but those didn’t work either.

The description in the blog post is very misleading. It is not about the glyph names. Try opening the font in Glyphs and check the Features in Font Info > Features. The build ligatures for each icon.

You can automate that if you name the glyph d_e_l_e_t_e.liga and update the features.

Now I can see where the names are coming from, I just can’t replicate this myself. I’ve tried both of those options, and have also copied the information from the Material Icon set verbatim but that just generates an error when exporting.

I’ve uploaded my Glyph file here, it only has two icons at the moment whilst I figure this out but perhaps you could take a look and see if there’s anything awry

To make the OpenType work, you need the letters that are used in the ligatures in the font. So add a lower case set.

That seems to have worked!

It’s a bit fiddly overriding the fonts, seems to have caching issues which might be where i’ve not seen any of my expected changes, but exporting the font to another location seems to do the trick and can now just type into the override field in Sketch and it pulls through the icon.

Thanks so much.

to test fonts in Mac Apps: