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!
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! =)
Best,
René
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 !