Semantic Ligatures for Icon Font

Glyphs
1

Hello

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!

2

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.

3

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! =)

Best,
René

4

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

5

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 !