Iconfont supports new color font ICONS

For a long time, the only way to use vector color ICONS on the Web is to use SVG, which is a huge constraint on the user’s imagination, so we have been exploring and experimenting. Having worked through a number of challenges, today I am proud to announce that Iconfont.cn is the first production management platform in the world to support color font ICONS. This enables the seamless transition of millions of our current color ICONS to the new color font icon technology, while bringing a number of exciting new features.

Let’s go!

What is a colored font

Chromatic fonts (colors fonts or retinex fonts) is a font technology that allows for the use of fonts in eachThe fontUse multiple colors in. It can be used not only in the design of ICONS and emojis, but also in normal text fonts. For more on the story behind color fonts, check out my seriesA Brief History of Font ICONS.



Apple first added colored emojis to the iPhone 3G in 2008 (left)

Color font format

Color fonts are supported in the following formats, all of which are part of the OpenType specification:

• SVG: The vector font standard led by Adobe and Mozilla, OpenType SVG (OT-SVG). It contains not only the standard TrueType or CFF glyph information, but also optional SVG data, allowing you to define colors, gradients, and even animation effects for fonts. Color information in the SVG standard will also be stored in the CPAL table. Note: Apple’s implementation follows the W3C’s SVG Native specification, which is a subset of SVG 1.1.
• COLR/CPAL(Version 0) : Vector font standard led by Microsoft. Support for COLR, which records layer data, and CPAL, which records color scheme information, is integrated into Windows 8.1 and later (which does not support gradients).
• CBDT/CBLC: A Google-led bitmap font standard. CBDT records color bitmap data and CBLC records bitmap location data, which is actually the color version of EBDT/EBLC.
• SBIX: Apple-led bitmap font standard, the format used by Apple Emoji. SBIX is a standard bitmap image table that contains PNG, JPEG, or TIFF image information. Support for SBIX is integrated in macOS and iOS.
• **COLRv1 (Version 1) : A Googl-driven update based on **COLR/CPAL tables that supports gradients, Affine Transformation, and a variety of hybrid modes. It is now in the OpenType 1.9 Alpha specification.

The color font icon in iconFont

Eight years ago, I shared in the winger networkBeyond Icon FontIn the introduction of some color font icon technology. Now that color font technology is maturing in the OpenType specification, it is timeReturn to the beginner’s mindTo make iconFont support truly colorful font ICONS.



ICONS in iconFont are all vector **,So there are only two formats available, OT-SVG and COLR**, let’s compare their advantages and disadvantages:

OT-SVG

• Pros: Support for gradients, shadows, filters and even SVG animations, and support for mixing vectors and bitmaps.
• Disadvantages: Large file size, poor rendering performance, no support for variable fonts. Safari has many restrictions on SVG embedded in fonts for performance and security reasons, and Chrome is not intended to support the format.

COLR

• Advantages: Small file size, good performance, support for variable font technology.
• Disadvantages: No support for gradients, bitmaps (COLRv1 specification has extended support for gradients).
• ** Note: ** Chrome on Mac can’t change the color of the monochrome ICONS when color and monochrome ICONS are co-existing. This is a Chrome bug (click on the top right corner to fix them quickly).

​

To sum up, we chose the COLR format with smaller file size, faster performance, and better compatibility (all color fonts below refer to the COLR format without gradient).



Color font browser in actionpreview



Use color fonts to create a Banner (The sample)

Advantages of colored font ICONS

Better browser compatibility

From Internet Explorer 9 to iOS 11, all major browsers support the COLR color font format, seecaniuse.com 和Real machine test screenshot.

Smaller volume

Color font ICONS are much smaller than SVG ICONS because fonts can be compressed using the very high WOFF2 compression ratio and the same glyph can be reused in **COLR/CPAL ** format fonts. Come with iconfont. Cn in the comment boxExpression package(64 ICONS) as an example, compare the following:



In Google’s Noto Color Emoji font,

• Using WOFF2 compression: The file size of COLRv1 is about a third (34.3%) of that of OT-SVG.
• No WOFF2 compression: The file size of COLRv1 is about half that of OT-SVG (44.5%).

Faster rendering performance

SVG is an XML-based vector format that is more complex when parsed and rasterized for rendering to the screen. Font technology uses system-level apis such as DirectWrite and Core Text that are much faster than browser layer-by-layer rendering.

In Skia benchmarks for cold-cached SVG and COLRv1, drawing SVG glyph was 20-45% slower than COLRv1, a performance difference that was closely related to the initial page drawing and font size changes.

Better cross-platform support

COLR is easily ported to other platforms thanks to well-formed implementations in Skia and FreeType. Like the Web renderer used in Flutter 2CanvasKitSupport for COLR color fonts is integrated, and gradient is already supported.



Even after inheritingFirefox OSThe mantle ofKaiOSIn also perfect support, what? Never heard of KaiOS? This is the second largest mobile operating system in India!



photoBy Alexis Deveria, Caniuse.com

​

Wider application scenarios

The epic system-level support for the COLR format outside the browser opens up new possibilities for color fonts beyond the Web.

For example, Keynote is not support SVG vector pictures, and this has been “PPT engineer” distress, now with color font technology, Keynote, Office using vector ICONS are not a problem. Windows 8.1 began to support the COLR format at the system level, so Microsoft’s entire family bucket of software is also fully supported.



From now on your PPT hd “no code”, vertical enjoy silky smooth, put again big will not be blurred.

• What about code farmers? Don’t worry, you can use color fonts either in the editor or on the command line, as long as the system supports color fonts.
  
  

Cooperative exploration

We’re working with Nail In The works to upgrade their emojis from their current PNG bitmap format to a color font version. Currently, there are 179 static PNG emojis, which are expected to be reduced to about 100-200KB when converted to color font format. The more ICONS, the more obvious the size advantage of color font will be.



Nail emoji converted to SVG and color font contrast

Nail color emoji demo in iOS App

How to use

1. To open aMulti-color icon librarySelect a few favorite ICONS to add to the shopping cart.
   
   
2. Click the cart button on the right to open the cart float.
   
   
3. In the shopping cart float, click the New Item button, enter the item name, and click OK. A test color font icon project is built.
   
   
4. Then it will automatically jump to the new project and click project Settings in the upper right corner.
   
   
5. Check the “color” option in font format and click “Save” button.
   
   
6. Click “No code yet, click here to generate”, after a moment, color font generation will be a little slower.
   
   
7. After the creation, there will be a “Preview font” menu behind the online link button. Open it to test the effect of the actual color font.
   
   

In the future

Thanks to the good underlying design, iconFont will soon be able to support COLRv1 with gradient once Chrome officially supports it in the future.

In addition, cooperateVariable font technology, you can also achieve the icon thickness adjustment, animation and other features.​

Design is great because of infinite imagination, and technology is the wings of imagination, let’s explore more interesting ideas together!

Thank you

Design team: @Xinyan, @Xiyu. Nail team: @ wo powder, @ xiao poison. Article review: @chenghu, @Guxifeng.