Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Variable font not showing in color on Firefox macOS #248

Closed
vannavu opened this issue Sep 7, 2020 · 4 comments
Closed

Variable font not showing in color on Firefox macOS #248

vannavu opened this issue Sep 7, 2020 · 4 comments

Comments

@vannavu
Copy link

vannavu commented Sep 7, 2020 •
edited
Loading

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?

Screen Shot 2020-09-07 at 8 58 15 AM

Screen Shot 2020-09-07 at 8 58 45 AM
@frankrolf
Copy link
Member

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
Copy link
Member

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
Copy link
Author

vannavu commented Sep 8, 2020

Thank you!

@vannavu vannavu closed this as completed Sep 8, 2020
@frankrolf
Copy link
Member

@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

@tiffwong tiffwong mentioned this issue Oct 22, 2021
Merged
tiffwong added a commit to linode/manager that referenced this issue Oct 27, 2021
@tiffwong
M3-5546: IP address font color on Firefox in dark mode (#8008)
2a218c2 
## Description

Previously, if you go to any Linode Detail page on Firefox in dark mode, the font color for "IP Addresses" and "SSH Access" should be white but instead, it's showing up as black.

This is due to a known Firefox bug that will decide that a font is colored if it contains SVG glyphs (which surprise, Source Code Pro does). The latest release should've fixed this issue but the font is still showing up as black for me after updating the files.

After some sleuthing, I decided to test out [Ubuntu Monospace](https://design.ubuntu.com/font/) as an alternative to Source Code Pro. I tested the font color on Chrome, Firefox, Safari, Edge, Opera, and Vivaldi with no issues.

**Links:**
- [GitHub issue with more details](adobe-fonts/source-code-pro#248)
- [List of Ubuntu Monospace font files](https://google-webfonts-helper.herokuapp.com/fonts/ubuntu-mono?subsets=latin)

## How to test

- On `develop`, use Firefox and go to any Linode Detail page in dark mode to verify the problem
- The font color should now be white after checking out this PR
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@frankrolf @vannavu