
During the keynote talk at the Microsoft Build conference, at 2:22:51 Kevin Gallo showed a slide outlining the new developer-related features of the Windows 10 Anniversary Update that will ship in the summer. One item stuck out to me as a nice surprise: “OpenType SVG color fonts”:
https://www.facebook.com/photo.php?fbid=10154033931238764
We’ve come a long way since I proposed the marriage of SVG and OpenType as a way to get multi-color and typographically sophisticated fonts. I posted this on several discussion lists back in June 2011:
My proposal was met with some reluctance on one hand, but keen interest on the other. In October 2011, Sairus Patel from Adobe presented the first draft of a specification detailing how SVG glyph descriptions could be placed inside OpenType fonts. We have formed a working group within the W3C consortium:
https://www.w3.org/community/svgopentype/ and two years later, the group has presented a final specification. In March 2015, the OpenType font format specification was updated to version 1.7 and added the support for SVG glyph descriptions:
Mozilla Firefox was the first app that actually implemented OpenType SVG color fonts, and FontLab quickly followed with the free FontLab Pad app:
http://www.fontlab.com/fontlab-pad/
Many thanks to all my colleagues at FontLab, Adobe, Microsoft, Mozilla, Monotype, the W3 Consortium and other groups and companies who’ve worked over the last five years to turn my simple modest idea into reality!
Best,
Adam
Ps. The Microsoft Build conference keynote can be watched at:
Comments
And just for the records, Glyphs can produce fonts with SVGs, too.
it already is implemented in Firefox, and part of the OpenType spec:
https://www.microsoft.com/typography/otspec/svg.htm
Adobe has added color emoji in the SVG flavor to Source Code Pro
https://github.com/adobe-fonts/source-code-pro
so I imagine they intend to support it as well.
Webkit and Chrome? Don't know, but since the SVG table is part of the OpenType standard, I don't see why not — especially since all modern browsers have built-in capabilities to render SVG graphics already.
I shall update my article http://blog.fontlab.com/font-tech/color-fonts/color-font-format-proposals/ in some near future.
Proposals on animation, I'd like to take a look at, as well. Motion is clearly going to be a part of web typography. Corporate identity, logos, will demand it. Off the top of my head, two tech giants - Google and Verizon - both clearly took onscreen motion into account in their recent rebranding effort.
(I'm working on a demo using JavaScript to add motion through character-swapping but that's the only way I can see doing it today, outside of an animated gif, which is overkill for text-only.)
Thanks for being one of those who kept pushing for color fonts.
-rich
https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/14316/
\o/
A monochromatic glyph with the user's font color in a gradient that fades to transparent.
A specifically colored glyph with some elements set in the user's font color.
Considering that such details probably depend on what the Emoji have eaten before visiting the rest rooms, and that this hardly can form the basis for discrimination, the answer will most likely be ‘yes’.
I mean, now, I serve a set of styles, then the user's web code carries on as endlessly as it wants on the color and layering of the fonts, works on any platform, any OT works, still works, any hinting, gsub or gpos that works, still works, any vars that come along, etc. they all work with layered styles, as opposed to this.
@SiDaniels COLR/CPAL is a valid option, but in July (when the next Windows release is) OpenType+SVG will have much wider support. If you want to serve up layered fallback fonts, take a look at ChromaCheck. It'll look for which color font format is supported on load time and adds a class to the HTML root element so you can go the manual layering route.
@Ray Larabie Fontlab Studio/TransType, Glyphs and RoboFont can, and I think there are some Python command lines tools you should be able to run on Windows.
@Ray Larabie Yes, I meant Fontlab Studio 6. I used TransType on both Windows and OSX and it works pretty good, but has two disadvantages. TransType tries to automatically generate fallback glyphs based on your color glyphs and these are usually not the shapes you want. See the editable region here in a non-Firefox browser for an example of these autogenerated shapes.
The other disadvantage is that TransType creates invalid SVG documents for the glyphs. These have a bug in them that causes a browser to show the glyphs upside down. Fortunately, Firefox is lax about it and shows the glyphs correctly, but stricter browsers/apps won't.
For now the solution for both is to dive into the fonts and patch this yourself. If you want to know more about this process read my article on creating an OpenType+SVG font.