Variable font not showing in color on Firefox macOS

[vannavu]

The bug is happening specifically in Catalina 10.15.6 and Firefox 80.0.1. Otherwise the color is showing correctly on Safari and Chrome across all devices as well as Firefox on Android and iPad.

I’m getting a weird bug that is only happening with Source Code variable and not other variable fonts on Firefox. The text color is showing as black instead of what’s defined in CSS. The website uses the TTF file. Any idea what may be going on/how to fix it?

[frankrolf]

Hi! Thanks for the report.

This is a known bug in Firefox, it has come up before:
#217

The reason is the fact that the font contains a handful of SVG glyphs – Firefox automatically concludes that that font is colored and thus should not be colored any other way.

I think there might even be an official Mozilla bug for this – I’ll look it up and report back.

[frankrolf]

This is the official acknowledgement: https://bugzilla.mozilla.org/show_bug.cgi?id=1520157

Looking around on the bug tracker, I stumbled upon
https://bugzilla.mozilla.org/show_bug.cgi?id=1297676 , which led to
https://pixelambacht.nl/lapislegit/ – interesting!

Summary – fonts with SVG table are (unfortunately) not well supported on Firefox.
If you have control over the fonts you’re serving, you could try subsetting them to exclude the SVG glyphs?
I would start here: https://fonttools.readthedocs.io/en/latest/subset/index.html

[vannavu]

Thank you!

[frankrolf]

@vannavu This has been resolved with the latest release (see also #250):
https://github.com/adobe-fonts/source-code-pro/releases/tag/2.032R-ro%2F1.052R-it%2F1.012R-VAR