Free open source tool for making color font

mitradranirban
mitradranirban Posts: 29
in Type Design Software
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 
Tagged:

Comments

  • Peter Constable
    Peter Constable Posts: 210
    Take a look at googlefonts/nanoemoji: A wee tool to build color fonts.
  • mitradranirban
    mitradranirban Posts: 29
    Yes, I am exploring that and also color-fonts. Hope they will allow to include emoji not included in unicode, too. 
  • mitradranirban
    mitradranirban Posts: 29
    edited November 26
    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
    Simon Cozens Posts: 752
    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
    mitradranirban Posts: 29
    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
    Simon Cozens Posts: 752
    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
    mitradranirban Posts: 29
    Thanks Simon, I will complete the Basic Latin in the font and try with ttf format. 
  • mitradranirban
    mitradranirban Posts: 29
    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
    Peter Constable Posts: 210
    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
    mitradranirban Posts: 29
    edited December 3
    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
    mitradranirban Posts: 29
    edited December 3
    Even though COLRv0 would have suffice my purpose, nanoemoji created COLRv1 only
  • Thomas Phinney
    Thomas Phinney Posts: 2,899
    That seems like a bug... or at least an unfortunate oversight. Perhaps not needed for the original purpose of the tool.
  • mitradranirban
    mitradranirban Posts: 29
    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
    mitradranirban Posts: 29
    Is there any tool which can convert COLRv1 fonts without gradient into COLRv0? 
  • mitradranirban
    mitradranirban Posts: 29
    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
    Simon Cozens Posts: 752
    edited December 7
    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
    Hin-Tak Leung Posts: 363
    edited December 9
    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
    Hin-Tak Leung Posts: 363
    edited December 9
    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
    Simon Cozens Posts: 752
    COLRv1 sort of works on Safari for some fonts, but not others:


  • Floor van Steeg
    Floor van Steeg Posts: 14
    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
    mitradranirban Posts: 29
    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
    mitradranirban Posts: 29
    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
    Floor van Steeg Posts: 14
    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
    mitradranirban Posts: 29
    As there is no open source tool available to create COLRv0 from OT SVG, I have to work with COLRv1
  • Peter Constable
    Peter Constable Posts: 210
    Have you tried using nanoemoji with this option (assuming your outlines are TrueType, not CFF)?

    nanoemoji --color_format=glyf_colr_0
  • mitradranirban
    mitradranirban Posts: 29
    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
    mitradranirban Posts: 29
    edited December 11
    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
    mitradranirban Posts: 29
    The same toolchain can be extended using fontmake and ttx editing to create CPAL/COLR variable font, I found 

    , 

  • mitradranirban
    mitradranirban Posts: 29
    edited December 23
    Now I can create a variable color v0 font from Fontforge and ttx only without requiring intermediation by opentype-svg and nanoemoji 
    , 

Categories