one color font for all Browsers in 250kB

Grzegorz Luk (gluk)
Grzegorz Luk (gluk) Posts: 161
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

  • Peter Constable
    Peter Constable Posts: 208
    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?
  • Grzegorz Luk (gluk)
    Grzegorz Luk (gluk) Posts: 161
    Peter Constable said:
    [...] 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 Savard
    John Savard Posts: 1,126
    edited July 2022
    Your test page displayed perfectly for me, in the Mozilla Firefox browser. Running under Windows 10.
  • Cory Maylett
    Cory Maylett Posts: 248
    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.



  • Grzegorz Luk (gluk)
    Grzegorz Luk (gluk) Posts: 161

    Cory Maylett said:
     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)

    Cory Maylett said:

    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 Phinney
    Thomas Phinney Posts: 2,883
    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.)
  • Helmut Wollmersdorfer
    Helmut Wollmersdorfer Posts: 212
    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. Isaak
    André G. Isaak Posts: 632
    edited August 2022
    Also good with Opera 89.0.4447.83 (x86_64) on MacOS.
  • Cory Maylett
    Cory Maylett Posts: 248
    edited August 2022
    Helmut Wollmersdorfer said:
    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.
  • Grzegorz Luk (gluk)
    Grzegorz Luk (gluk) Posts: 161
    @Thomas Phinney @Helmut Wollmersdorfer @André G. Isaak @Cory Maylett: thank You for info :)
    Cory Maylett said:

    [...] 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)

  • Erwin Denissen
    Erwin Denissen Posts: 300
    Grzegorz Luk (gluk) said:

    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.

  • Grzegorz Luk (gluk)
    Grzegorz Luk (gluk) Posts: 161
    Erwin Denissen said:
    [...] 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)

  • Erwin Denissen
    Erwin Denissen Posts: 300
    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: 161
    edited August 2022
    Erwin Denissen said:
    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 )

  • Michael Rafailyk
    Michael Rafailyk Posts: 146
    Helmut Wollmersdorfer said:
    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.
  • Grzegorz Luk (gluk)
    Grzegorz Luk (gluk) Posts: 161
    Michael Rafailyk said:
    [...] 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.

  • Michael Rafailyk
    Michael Rafailyk Posts: 146
    Grzegorz Luk (gluk) said:
    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.
  • John Butler
    John Butler Posts: 290
    Works great in Firefox on Android!

Categories