OpenType SVG color fonts coming to Windows 10 :)

OK, thanks John. Perhaps my mistake was in assuming there was an immediately significant use for this technology that must extend beyond creating emoji and various symbol fonts. Perhaps there will be, down the road.

The utility of color fonts is convenience and cost savings. Sure one can use JavaScript and CSS, or find/replace,  to control color layers, but doing so takes time and money.  And type designers don't want to develop and maintain software (it took House ten years to get PLINC right) just so people can use layered fonts with less hassle. It's easier for all involved if it's just a font format. Or at least it would be if those responsible had not created four formats instead of using the one that covers all of the others.

@Richard Fink — I didn't say emjois and symbols weren't significant. I said that I had, perhaps, mistakenly assumed the immediately relevant use of multicolor fonts might extend beyond that significance.

@James Puckett — So far I see the convenience and cost/time savings being useful only if I need the effects made possible by them and if those effects are best achieved by calling in a font as opposed to just recreating the element as a PNG, a scalable SVG, a HTML canvas element effect or, even, an animated GIF.

Yes, there are SEO and accessibility advantages to using a font instead of a PNG, JPG or SVG. I can also see time-saving advantages using a multi-colored headline font on a website with dozens or hundreds of those headlines.

Even so, can the colors, transparencies, gradients or animations built in these fonts be controlled by the designer or are they hard-coded into the fonts? Unless I have the ability to customize these things, a multicolor font's usefulness beyond emojis and, say, flag and logo icons seems almost non-existent — at least for me.

What I can see happening, however, is the unfortunate and gratuitous misuse of multicolor fonts to create websites reminiscent of the 1990s when gimmicky animated GIFs and blink tags were used for no particular reason other than convenient decorations.

Perhaps, down the road, someone will come up with a killer use of these fonts, or the technology will evolve into something with much broader flexibility and usefulness. And once again, maybe these uses already exist (like Khaled's great example), but I'm just too thick-skulled to pick up on them. I mean, it certainly wouldn't be the first time that's happened.

Belleve Invis said:

It’s not only SVG.
It’s ALL FOUR.
(Tested in 14393/Edge. Chrome does not support ANY of them.)

Yes, all four formats are supported in DirectWrite and in Edge in the Windows 10 Anniversary Update. (The page seen above used to be available on pixelambacht.nl, but it doesn't seem to be working today.)

I can see a lot of use cases for color/pixel fonts on the web. For example I would love to see letters like that for headlines: https://www.behance.net/gallery/22901465/Training-Calligraphy
or:
https://www.behance.net/gallery/3292158/Frontage-Typeface-freefont
(just searched for one minute...)

There is so much more possible with transparency and texture that is not possible with vectors.

@gluk Nice! In which font editor did you create this? I don't recognise it by the generated SVG code. (Which is very clean but still does the "transform on SVG element" thing that is non-spec). It'd be nice if the gradient could be reused instead of being repeated for every glyph. I know referencing (parts of) other SVG documents is possible, but haven't tried that myself.

I haven't experimented with CPAL + SVG myself yet. To be honest I'm waiting for a font where this is implemented it so I can dissect it, works better for me than dissecting specs. I've added issues to my little OpenType SVG test font to test this, though: https://github.com/RoelN/LapisLegit

By the way, your font now also works in Windows 10

John Hudson said:

Yes, I can see its use for emojis

That's the primary reason why colour font technology exists now. Once you've determined to encode little pictures as text, you need a technology to colour and possibly animate the little pictures within text delivery technology, i.e. fonts.

The reason why four different colour font formats exist and are all included in the Open Font Format standard is, well, stupid. But I console myself that the companies involved learned that lesson, and are unlikely to let that happen again with something that's actually important.

I don't think 4 formats were in the standard as Apple didn't submit theirs. Also OT includes (at least) 3 formats for monochrome fonts - TTF, CFF and bitmap. 

Roel Nieskens said:

@gluk The implementation in Windows 10 brought some bugs and inconsistencies to light, you might find those interesting to follow too: https://github.com/eosrei/emojione-color-font/issues/50 and the discussion on the SVG OpenType mailing list: https://lists.w3.org/Archives/Public/public-svgopentype/2016Aug/0000.html

I do not think that it is a “bug”. The semantics of SVG `viewbox` is not specified in OT Spec, therefore MS and Mozilla can have different, well, understandings.

Will OTvar factor into any of these color formats? Are we going to see variable optical size emoji?

Have any new tools/techniques for creating color fonts emerged? Any new ones in development?

In Android/iOS app market, which color formats are more likely to be supported?

@Thomas Phinney Are there any plans to fix the invalid SVG problem in TransType?

In Windows 10 anniversary, are there any native apps besides a browsers that I can use to display any of these color font formats? The font preview, Notepad and Wordpad don't work.

I guess I'll stick with FontLab Pad for now. If you find of any Windows native apps that work with color fonts, please let me know.

Interesting. I sent a mail from Gmail to my Hotmail address with some emoji pasted in. 
In the Windows Mail app, color emoji was displayed in the preview pane. When I opened the message, it showed the black & white fallback emoji. I replied and changed the text color to automatic and the color returned. Copying and pasting emoji from a web page produced black & white fallback graphics. I set the color to automatic to make the color return. Gmail doesn't have an automatic color setting so the text is probably defined as black. I guess any color setting reverts to fallback.

Roel Nieskens said:

I haven't experimented with CPAL + SVG myself yet.

In have experimented by now, and the conclusion is that neither Firefox nor Edge take colors from the CPAL table for an OT SVG font. (Nor does Photoshop, by the way.)