one color font for all Browsers in 250kB

Grzegorz Luk (gluk)Grzegorz Luk (gluk) Posts: 157
edited July 2022 in Font Technology
I prepared a font ResotE-Pistachio that combines two formats (COLRv1 + OpenTypeSVG)  – thanks to WOFF2 format it was possible to pack the whole font into 254kB! I hope it will work in all modern browsers.
Information about problems is appreciated :)




Comments

  • Nice! 

    I'm curious: what's the size within the file of the COLR and 'SVG ' tables?

    Also, if an app supports both the COLRv1 and 'SVG ' tables, which do you think it should use?
  • [...] what's the size [...]
    so comparison for .ttf:
    • 62kB   "clean"
    • 2806kB SVGinOT
    • 455kB   COLRv1 
    • 3250kB SVGinOT+COLRv1
    and then TTF 3250kB → WOFF 520kB → WOFF2 254kB
    if an app supports both the COLRv1 and 'SVG ' tables, which do you think it should use?
    I'm curious too, but as far as I know MS Edge (first app with support for both formats) as first use COLRv1.
  • John SavardJohn Savard Posts: 1,088
    edited July 2022
    Your test page displayed perfectly for me, in the Mozilla Firefox browser. Running under Windows 10.
  • Cory MaylettCory Maylett Posts: 245
    edited July 2022
    The type showed up perfectly on my Samsung tablet using Chrome, Opera, and Duckduckgo. However, the type defaulted to a generic sans serif using the built-in Samsung browser, which isn't surprising.

    Using my Mac, the type displays nicely in Chrome, Brave, and Opera. However, Firefox displayed it in Times Roman (both the older and most current versions). Oddly, Firefox Developer Edition had no problem displaying it. Safari displayed the typeface, but it was solid black rather than color.




  •  Safari displayed the typeface, but it was solid black rather than color.
    no Safari COLRv1/SVGinOT support may be biggest problem, but solid black was expected result ("fallback" glyphs from font)


    Using my Mac, [...] Firefox displayed it in Times Roman (both the older and most current versions).

    it's unexpected. Now I have a subject for "investigation".


  • Thomas PhinneyThomas Phinney Posts: 2,730
    But it worked in Firefox Developer Edition. I assume that is their mechanism for making prerelease versions available to developers… which means it should work in a near-future release, right?

    (Of course, if you thought it ought to work now, there is still something to investigate.)
  • Safari Version 13.1.2 (15609.3.5.1.3) on MacOS: solid black 

    FireFox 99.0.1 (64-bit) on MacOS: looks good

    Google Chrome Version 103.0.5060.114 on MacOS: looks good
  • André G. IsaakAndré G. Isaak Posts: 626
    edited August 2022
    Also good with Opera 89.0.4447.83 (x86_64) on MacOS.
  • Cory MaylettCory Maylett Posts: 245
    edited August 2022
    FireFox 99.0.1 (64-bit) on MacOS: looks good

    I'm using Firefox 103.0.1 for MacOS and was still seeing Times Roman. I reset my Firefox preferences back to their defaults (Firefox calls it a "refresh") and the colored font showed up.

    Apparently, Firefox's preferences retained something from older versions that kept it from displaying.
  • @Thomas Phinney @Helmut Wollmersdorfer @André G. Isaak @Cory Maylett: thank You for info :)

    [...] I'm using Firefox 103.0.1 for MacOS and was still seeing Times Roman. I reset my Firefox preferences back to their defaults [...]
    I can only guess: your Firefox has downloaded the font incorrectly and cached it. With "refresh" font has been removed from internal cache. After that with new visit has downloaded the font correctly (most likely scenario)


  • I'm curious too, but as far as I know MS Edge (first app with support for both formats) as first use COLRv1.

    Microsoft Edge ceased support for OpenType-SVG.

    I suspect (and hope) that all color formats except COLR will eventually become obsolete as soon as Adobe starts supporting it. But maybe the color battle isn't over yet.

  • [...] as Adobe starts supporting it [...]

    I agree that support in graphics programs will be decisive in this "color formats battle". But I wouldn't say goodbye to OpenType-SVG so quickly. He has some promising advantages, like for example:
    • animated fonts (my example for Firefox)
    • true Single Line fonts for engraving (my example)
    • bezier curves (as long COLR OTF will not be widely supported)

  • Support for animation in OpenType-SVG is optional, so I would rather avoid it.

    I am not sure if CNC software / machines actually use data from the SVG table, but you are right about single line fonts and OpenType-SVG. However you can't make it a variable font (only COLR supports that), so it is rather limited.

    Our font editor allows you to make and/or generate single line fonts. See this demo page (single line color in Firefox and Safari; closed monochrome in Edge and Chrome):

    I didn't know about any difference in support for COLR with quadratic versus cubic curves. Can you be more specific?
  • Grzegorz Luk (gluk)Grzegorz Luk (gluk) Posts: 157
    edited August 2022
    Support for animation in OpenType-SVG is optional, so I would rather avoid it.

    is optional not mean, that it not may be useful in specific applications in the future

    [...] I am not sure if CNC software / machines actually use data from the SVG[...]
    with support for OpenType-SVG in CNC-software is the same situation as with Adobe support for COLR: as soon as starts supporting it :)
    [...] I didn't know about any difference in support for COLR with quadratic versus cubic curves. Can you be more specific? [...]
    my mistake... I keep in mind my research for support for variable COLR fonts with cubic curves and forgot that the problem was in "variable" part
    [...] However you can't make it a variable font (only COLR supports that), so it is rather limited.
    for single-Line, variable fonts the only possibility of existence (as far) is on-line service (for example my LimpelkaSL )

  • Safari Version 13.1.2 (15609.3.5.1.3) on MacOS: solid black
    That's strange. I just tested a color font with both COLR/CPAL and OpenType-SVG tables, and Safari 13.1.2 displayed it in color.
    So far I understand, Safari 13 work with the CPAL table, and Safari 14 work with the SVG table.
  • [...] Safari 13 work with the CPAL table [...]
    according caniuse.com Safari doesn't support COLR/CPAL(v1) but only COLR/CPAL(v0). ResotE-Pistachio uses COLRv1 tables.

  • according caniuse.com Safari doesn't support COLR/CPAL(v1) but only COLR/CPAL(v0). ResotE-Pistachio uses COLRv1 tables.

    Thanks for clarifying this, Luk, I just noticed the post is about COLRv1 (not v0). Now I see the difference.
  • Works great in Firefox on Android!
Sign In or Register to comment.