Weirdly, using Safari on macOS, clicking on the first of the "The Round Table" examples causes the page to unexpectedly reload, "because a problem occurred". Clicking on other examples doesn't do this.
There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/. SBIX is Apple's format and it basically just embeds PNGs in the font which isn't scalable. COLRv0 is Microsoft's format and it basically just stacks single-color glyphs, so it's scalable but doesn't do gradients. COLRv1 is newer (2019) and adds support for gradients. Opentype-SVG is Mozilla and Adobe's format and it embeds SVGs for glyphs. You can do gradients and maybe even animation, and it scales. CBDT/CBLC is Google's format and it also includes bitmap images like SBIX. You can make fonts that support multiple of these with https://github.com/googlefonts/nanoemoji.
No, this is a bit different. This new feature lets font authors define "layers" that can be individually colored by the end-user. Color gradation you describe is technically possible but would require many layers since the feature doesn't accommodate for partial transparancy or gradients.
This screenshot was made from a browser that does not support this stuff, so it's not very helpful. Every pair of examples should show different colors, and on your screenshot they're all the same (except of the very last example).
The examples do not work on Firefox on Android; they're Safari-only.
They do however render coloured fonts in non-Safari browsers (using basic CSS features that have existed a long time), but they're monotone per-character. The new safari feature supports multiple colours shown within a single character at once.
The lack of screenshots makes the article very confusing for non-Safari readers (as I mentioned in another comment)
Readit News
Any other Mac users see that, or is it just me?
Though I agree it could use a few more inline with the live examples, so you can check if your browser is already using what they announce.
Dead Comment
Deleted Comment
They do however render coloured fonts in non-Safari browsers (using basic CSS features that have existed a long time), but they're monotone per-character. The new safari feature supports multiple colours shown within a single character at once.
The lack of screenshots makes the article very confusing for non-Safari readers (as I mentioned in another comment)
https://i.imgur.com/KASP45O.jpg
Deleted Comment