Semantic Ligatures for Icon Font


I‘m trying to create an icon font to be used in web apps with Glyhps Mini 2. It should support semantic ligatures (e.g. the string „some-icon“ should be rendered as icon if the feature is supported).

I created the icons in the PUA (uniE000 and above) and replaced the unicode-names with custom names (e.g. „some-icon"). The font works well in browsers when I use the unicode, but I don‘t manage to support semantic ligatures.

Any hint is highly appreciated!

A ligature requires a special name. For your example, it would be s_o_m_e_hyphen_i_c_o_n. If you want it to go into standard rather than discretionary ligatures, add a .liga suffix.

But generally, this is a bad idea. Because it is not the task of the font to translate words of a specific language. That would be the task of text processing software, or at best a layout engine.

So keeping it as PUA entries was actually a good idea.

it is not the task of the font to translate words of a specific language.

Excellent point. Thank you @mekkablue! I’ve seen icon fonts (like Google’s Material icons) using ligatures and after some reading I thought it would be a good idea to follow the same approach.

But yes … you’re right. I’ll do my icon font the PUA way. This solves another concern: I have to support multi-colored icons in the font, for which I didn’t find a good solution following the ligatures way yet.

Thanks for your to-the-point help and thanks for making great software! =)


You can do color font ligatures (not saying that it is a good idea). But you need the full Glyphs for that: Learn — Search results for: ‘color’ | Glyphs

Wow … didn’t know this is possible!

After some reading I went Fontawesome’s Duotone way to achieve two-colored icons, which seems to be a very solid setup for now. – At least if you won’t need more than two colors per icon (as it’s based on ::before and ::after pseudo-elements).

As I have to build an Angular component for the icon font anyway (it’s part of the requirement in the current project) I would probably implement more-than-two-color-support via the Angular component in this case.

But I’ll keep the “chroma” option in mind. It looks like “the proper way” to implement multi-colored icons. I’m not sure about current browser support, maybe that could be a concern. Thanks for the hint @GeorgSeifert !