Create COLR fonts?

Can Fontself be used to create COLR fonts that can be rendered by Chrome?

The tutorial below makes it seem that Fontself exports Opentype-SVG, which if I’m understanding correctly cannot be rendered in Chrome. Feel free to correct me if I’m wrong.

Thanks!

Good question.

Fontself states Photoshop creates Color Bitmaps yet what format is the font exported as?

The Chrome Browser supports COLR and CBDT - which refer to the bitmap layer (information or fall backs when vector info doesn’t work) for the OpenType-SVG font.

COLR /CPAL fonts are one type of OpenType color fonts . These fonts compose layers of vector outline glyphs and color palette information into the final colored glyph. With this change, Chrome will support 3 color font formats cross-platform, the other two being CBDT/CBLC and SBIX.” Nov. 19, 2020 – Google

So SBIX is now available to CHROME which was not listed in the “https://www.colorfonts.wtf” article.
However - the browser still will not display the SVG vector data - but proper creation of the SVG FONT needs to come from the Photoshop version.

To answer your question better: Use the Photoshop FontSelf version that only makes the bitmaps within the SVG and then Chrome should be able to see bitmaps of your Font.

Illustrator FontSelf version only makes scalable vectors within the SVG font - and therefore no Bitmap data as a fall-back. I believe both datas can be stored in the Font Format - however the process and nature of both Adobe Applications is very different - much harder in Illustrator - although one could say - Vector info can be rasterized easily enough within the app - why not add it to the engine automation within Fontself… perhaps it will one day. And perhaps the process is far more difficult to draw the vectors in Photoshop – and far simpler to keep the two methods separate.

Perhaps there will be a separate open-source software available to combine the COLR layer data back into SVG font and repackage a more complete font?

1 Like

COLR is currently not supported as it poses various challenges technically, and practically when designing fonts.

1 Like

Hi Franz,

I do not mean to sound like I am arguing but rather - I would like this explained little better.

Does Fontself for Photoshop not export a OFT file format?
I imagine it does - so what layer / table does the bitmap information from Photoshop sit within the OFT?

From what I gather, the open-type font format has several layers

  • a SVG layer for vector information
  • a SBIX layer that gets really complex, linking to individual PNG graphic files,
  • a COLR layer that consists of a table of colours
  • and CBDT yet I do not understand what that layer does exactly
  • I am think CBDT is a layer that perhaps defines the order of colour shapes and possibly the value and transparency in communicating with the COLR layer

It is understood - all these layers and information are either saved or not within the OFT - Open-Type FONT. TrueType does not have this ability. WOFF2 might? But the best and obvious format is OTF.

However Franz, you say, “COLR is currently not supported as it poses various challenges technically, and practically when designing fonts.” Meaning the bitmap information needs to resaved somehow, somewhere within a OFT – but where… unless FontSelf for Photoshop is exporting another font format all together. So what is it? How exactly does FontSelf for Photoshop, store the bitmap information.

Obviously Illustrator is mainly a vector application and hence the vectors drawn and imported into FontSelf for Illustrator would export a font with SVG information - this is the version of FontSelf I own and use.

I do not have the Photoshop version of FontSelf - and chose not to, knowing it only creates bitmap fonts. Bitmaps do not scale nicely - as most single color fonts all scale beautifully… why buy it? And as a Photoshop user, typing and fonts in general are somewhat clunky. Certainly not the choice I would use to set copy - and why InDesign was made.

“The Microsoft approach to color fonts employs two additional OpenType tables, CPAL and COLR. CPAL describes a palette of colors, and COLR defines how the colors from CPAL are used by which glyph. Technically, what appears to be multiple colors in a single glyph, is actually multiple glyphs stacked on top of each other, each of them displayed in its individual color. But you need not worry, Glyphs will take care of all that techy stuff.” – https://glyphsapp.com/learn/creating-a-microsoft-color-font

Perhaps I am over simplifying things - yet a question was made - and I think if the person used Photoshop FontSelf version that makes bitmap fonts - it would work within Chrome.

I have been searching for a open-source font converter - that could take an OTF from Photoshop made with Fontself and see if it can be convert to WOFF or WOFF2 then test if Chrome is capable of displaying the font as mixed colored font.

Having a sample of a Colored Font from Photoshop FontSelf that is bitmap would be helpful.