Font rendering broken for some fonts - 78.12.0esr/MacOS 110.11
Noticed a weird problem - some sites don't render their fonts, just empty space in place of text.
Tried to debug it: 1. Safe mode and disabling hardware acceleration doesn't fix it 2. Sandbox values don't change anything 3. Tried other Mac with the same Firefox version and macOS version - same issue 4. Experimented with CSS in dev tools - issue is related to the specific font (InterVariable in this case, also saw it with OpenSans before).
As you can see on screenshots - we have InterVariable font for this specific block. If I change CSS and remove this font, replacing it with some other one like Roboto - font starts rendering fine. Interestingly enough - font preview in the dev tools works completely fine - font renders, it just is not rendering in the page itself.
As it is a Variable font and me having older MacOS 10.11 - I was suspecting that it is a bug with Variable font support, but why does it render in dev tools and why doesn't it fall back to the other supported font, if this one is not rendered?
Disallowing pages 'to use their fonts' obviously fixes it - as it activates fallback to fixed fonts, but it is not a proper fix, as it obviously messes up designs for sites and their custom fonts.
This side renders completely fine in Chrome, so it must be a Firefox issue. Upgrading macOS is not an option, so I would be fine with a fixed ESR version that works correctly.
Attaching screenshots showing debug info.
All Replies (10)
Another site with the similar issue - this time with Open Sans. Went to google's demo site - and looks like it is now showing most of the glyphs, with some being shown. Looks quite confusing.
You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
We have recently seen reports that the Open Sans font is causing such a problem with text missing characters. Do you have local copies installed of involved problematic fonts ?
- /questions/1345769 Website text scrambled
I've provided screenshots showing font inspection tab in both of my posts. I don't have those (InterVariable and Open Sans) fonts installed locally. I've tried installing them - no changes.
Interesting development - I've cleared my browser's cache - and now I see a different set of glyps for Open Sans (still not the full one), InterVariable still not working at all.
Attached a screenshot.
Another thing - if I go to https://fonts.google.com/specimen/Open+Sans - I see all types of the font, but as soon as I click one of them - it disappears (becomes white space), it still is there, I can edit it, but it is invisible
Attached 2 more screenshots
And yes, I do have the same issues on both of the sites mentioned in that question other user has shared: https://www.churchofjesuschrist.org/?lang=eng https://www.bcbstx.com/
Also getting this on multiple sites. I have Open Sans installed locally. Here's my current view of the Glyphs list on the Google Fonts page
Is it possible that your local copy is an older version of this font that is causing problems ?
Maybe try to uninstall your current copy and reinstall the latest version with all its variants.
cor-el said
Is it possible that your local copy is an older version of this font that is causing problems ? Maybe try to uninstall your current copy and reinstall the latest version with all its variants.
Well, I don't have a local copy - and still have this issue. Tried installing it - no changes, so right now I don't have it. By the way - is there some way to see if FF is using a local font or downloaded from the site? I see only remote fonts in the Fonts tab.
Edeziri site na nkth
Maybe file a bug report to see what the devs have to say about this font issue on Mac.
Found this bug report about Firefox 78.12.0 ESR.
- 1723922 - Problem with Font
cor-el said
Found this bug report about Firefox 78.12.0 ESR.
- 1723922 - Problem with Font
Thanks, moving there :) Interestingly enough - the issue with Open Sans has been resolved by itself today, had to clear my caches (doing the same yesterday didn't help, so must be something has changed with the font itself). The issue with InterVariable is still present.