Coloring fonts still feels very tricky, especially with multi-layer glyphs and complex marks. Any practical advice or guidance would be greatly appreciated

While searching for tutorials about coloring glyphs, I found this video about FontCreator 7:
https://youtu.be/J4BSK_ASOlw?si=oyIR47tmApYIhgET

However, since I’m now using FontCreator 15, I have some questions regarding glyph coloring, especially with Arabic fonts and diacritical marks:

  1. What is the practical difference between single-layer and multi-layer glyph coloring in FontCreator?

  2. What is the best approach to color diacritical marks (like Fatha, Damma, Shadda) without breaking their position or causing alignment issues after exporting or when used in text?

  3. How can I ensure that the colors are preserved correctly after exporting the font? Are there any specific export settings to guarantee compatibility across apps and browsers?

  4. Is there any recent tutorial (preferably for version 15) that explains how to color complex or composite glyphs, with a focus on Arabic marks or Quranic symbols?

Coloring fonts still feels very tricky, especially with multi-layer glyphs and complex marks. Any practical advice or guidance would be greatly appreciated.

1 Like

As you probably already know, older webbrowsers and legacy apps that don’t understand COLR will just show the glyphs in monochrome. However if they don’t support SVG, then the glyph will most likely be blank.

  • Single- vs. multi-layer coloring
    A single-layer glyph can hold only one solid fill, so it’s fine for flat icons or emojis. If you need two or more colors in the same glyph (e.g. an Arabic base plus a colored outline), then you have to add a layer for each color.

  • Coloring Arabic marks
    It should just work without any additional precautions.

  • Exporting and compatibility
    Color font technology support in applications is still slowly but steady growing.
    For the web use COLR.
    For desktop applications, it really depends.

  • Step-by-step tutorial
    We have this tutorial: Create OpenType Color Fonts

1 Like