Free open source tool for making color font

mitradranirban

I want to make a color emoji font containing emoji not present in unicode. As I am a hobbyist and I always use open source tools for creating my font, I was wondering is there any free and libre tool for creation of  color emoji font? 
Adobe provide tools for creating color svg font, but as they are not supported in browser other than Firefox and old Edge, it will not serve my purpose. I am searching for similar tools for making colrv0 or colrv1 fonts. 
Thanks in anticipation 

Peter Constable

Take a look at googlefonts/nanoemoji: A wee tool to build color fonts.

mitradranirban

Yes, I am exploring that and also color-fonts. Hope they will allow to include emoji not included in unicode, too. 

mitradranirban

I found that Adobe svg-ot creation tool is very beginner friendly. I could create a three layer color font with fontforge and the tool in an hour. The results are quiet good considering the little time I spent on the project. 

However nanoemoji failed to add either COLRv1 table of CBDT table to the OT-SVG font as claimed. 
If anyone is interested to know the process I built the font, it is documented with nanoemoji error messages here. Any suggestion on what I am doing wrong, or how I can do better is welcome. 

Simon Cozens

I wrote two tools for creating COLRv1 fonts out of existing TTFs:

• FontPainter is a web-based Illustrator-style interface to assembling layers. See here and here for some examples of creating variable colour effects.
• PaintCompiler is a procedural approach in Python where you can write code to assemble the layers; example, example, example.

mitradranirban

Thanks Simon for Fontpainter, which is a quick and fun way to convert a monochrome font into COLRv1 in minutes. It also support variations so changing of color and pattern through variation axis will be easy.


However to create a multicolor emoji font from svg files present will require a completely  different approach

Simon Cozens

mitradranirban said:

If anyone is interested to know the process I built the font, it is documented with nanoemoji error messages here. Any suggestion on what I am doing wrong, or how I can do better is welcome. 

Nanoemoji works on fonts with TTF (TrueType) outlines, not OTF (CFF) outlines. The nanoemoji error is coming from the fact that it cannot find a TrueType glyf table in the font. You should export in FontForge to TTF format instead of OTF format.

mitradranirban

Thanks Simon, I will complete the Basic Latin in the font and try with ttf format. 

mitradranirban

Simon Cozens said:

Nanoemoji works on fonts with TTF (TrueType) outlines, not OTF (CFF) outlines. The nanoemoji error is coming from the fact that it cannot find a TrueType glyf table in the font. You should export in FontForge to TTF format instead of OTF format.

Yes, it worked. Here is the CBDT font which can be previewed in GNOME font viewer 

Now I have to work on some alignment and clipping issues and the work on expansion. 
Thanks for all your help 

Peter Constable

I wouldn't recommend using CBDT. If you want to use bitmaps, I would use 'sbix'. CBDT is not as widely supported, and I wouldn't expect that to change.

If you're making a simple n-layered design without colour gradients, I'd use COLR v0, which is widely supported. If you want colour gradients and an outline format, then you can choose between COLR v1 and SVG, but both have limitations in app support. 

mitradranirban

I am creating in 3 formats, OT-SVG for Adobe tools, ColorV1 for modern browsers, and CBDT for desktop apps like Libreoffice 
Creating a color emoji with Fontforge is akin to multilayer wood block printing of yesteryear

backup Layer


Black Layer


Green layer


orange layer 


Red layer 

All are compiled into a multicolor emoji glyph by OT-SVG and then converted to COLRv1 and CBDT by nanoemoji 

dosa with sambar and green chutney 

I have also incorporated GSUB rules to convert on the fly.
 

If interested you can visit the project at Gitlab

mitradranirban

Even though COLRv0 would have suffice my purpose, nanoemoji created COLRv1 only

Thomas Phinney

That seems like a bug... or at least an unfortunate oversight. Perhaps not needed for the original purpose of the tool.

mitradranirban

As I checked through this test page, the COLRv1 webfont is working in both Firefox and Chrome in Ubuntu, and in Chrome in Android, and as Edge is based on chromium, it should work in that too. I don't know whether it works in Safari. 

mitradranirban

Is there any tool which can convert COLRv1 fonts without gradient into COLRv0? 

mitradranirban

Thomas Phinney said:

That seems like a bug... or at least an unfortunate oversight. Perhaps not needed for the original purpose of the tool.

On the other hand, it may be a deliberate ploy by Google to flood the market with COLRv1 fonts, forcing Apple to provide COLRv1 support in Safari to prevent breaking of websites. 

Simon Cozens

Of the 1745 fonts offered by Google Fonts, 15 (0.8%) are COLRv1 fonts. Excepting Noto Color Emoji, the most popular COLRv1 font is Bungee Spice; number 1266 in the list by popularity.

I think the market remains stubbornly unflooded.

Hin-Tak Leung

The webkit/safari folks has a statement a couple of years ago saying they won't add COLRv1 support.

OTOH, pre-Chromium MS Edge did support OT-SVG between 2016 and 2020.

webkitgtk switched from cairo to skia 3 months ago in September, and lost the decade-old OT-SVG support from cairo. I submitted a fix to add that back, well, "switching OT-SVG support on" is the proper description.

https://bugs.webkit.org/show_bug.cgi?id=283246

I can't comment on "...deliberate ploy by Google to flood the market with COLRv1 fonts, forcing Apple to provide COLRv1 support in Safari to prevent breaking of websites...", but they certainly leave OT-SVG support off by default in skia-based applications (that includes Chrome, MS Edge, and now webkitgtk) to avoid OT-SVG being adopted.

Webkit/Safari and WebkitGTK are different entities, btw.

Hin-Tak Leung

About CBDT support - it works on FreeType-based applications, which means anything Linux and/or Open-source, really. Chrome uses FreeType for anything that doesn't work on MS or Apple natively, so CBDT should work on windows Chrome and Mac Chrome, even if the rest of MS desktop and Apple desktop don't. Not sure about MS Edge - I am not informed on how MS Edge differ from Chrome on windows font-wise.

As for COLRv0, apparently it broke on Safari briefly for a few months 2nd half of 2023; but otherwise well-supported across most web browsers.

Simon Cozens

COLRv1 sort of works on Safari for some fonts, but not others:

Floor van Steeg

Simon Cozens said:

COLRv1 sort of works on Safari for some fonts, but not others:

I believe all COLRv1 fonts that appear to work in Safari also have an SVG table. The svg is used instead of COLR/CPAL on Safari and macOS.

mitradranirban

So I have published my color emoji font in all 3 versions possible through open source tools, namely OT-SVG, COLRv1 and CBDT. Hopefully that will cover most use cases 

mitradranirban

Floor van Steeg said:

Simon Cozens said:

COLRv1 sort of works on Safari for some fonts, but not others:

I believe all COLRv1 fonts that appear to work in Safari also have an SVG table. The svg is used instead of COLR/CPAL on Safari and macOS.

So the best strategy would be to include both COLRv1 and SVG in woff2 file. 
Though the file size increaes more than twice, it starts working in Safari in Macos

Floor van Steeg

If you don't use COLRv1 features I guess COLRv0 is a more compatible format. That seems to work reliably.

COLRv1 + SVG does not always render correctly in macOS/Safari. Perhaps this depends on the complexity of the svg, not sure. For example: https://nabla.typearture.com/ characters may disappear when selecting the text in Safari, or when zooming etc.

mitradranirban

As there is no open source tool available to create COLRv0 from OT SVG, I have to work with COLRv1

Peter Constable

Have you tried using nanoemoji with this option (assuming your outlines are TrueType, not CFF)?

nanoemoji --color_format=glyf_colr_0

mitradranirban

Oh no! I overlooked there is a add --colr_version flag option to maximum_color. I will try with that and post the result. 

mitradranirban

Yess! It worked .
Now I can create a COLRv0 font which works in Chrome and Firefox (tested in Ubuntu and Android) as well as in Safari in MacOS and Edge in Windows(tested through Browserstack) . The size of the colrv0 woff2 webfont is quiet small compared to CBDT and OT-SVG 

mitradranirban

The same toolchain can be extended using fontmake and ttx editing to create CPAL/COLR variable font, I found 

, 

mitradranirban

Now I can create a variable color v0 font from Fontforge and ttx only without requiring intermediation by opentype-svg and nanoemoji 
, 

mitradranirban

I made a How-to in YouTube for fellow hobbyists who may be interested in creating color font using open source tools 
https://youtu.be/qD7NemKJGkk