
Text in header <th> cells not visible (plus other font issues)
Myself and a colleague who both use Firefox on Mac are experiencing the exact same issues.
1. Table header cells don't show their text, unless we specify a font for the table
I tried to put an example of the HTML here but it was rendered as a table by this page. I'll add some images of the code instead to show it.
In Firefox the Header cells are not visible, but in Chrome the text appears correctly.
If we add CSS like...
<style> table { font-family: Arial, Helvetica, sans-serif; } </style>
...in the header then the missing text in the THs appears.
2. Other font issues
The Wave accessibility extension has text that doesn't appear and throw errors like this in the console...
downloadable font: rejected by sanitizer (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:3) source: moz-extension://b86260c9-33f6-4529-b12f-a101d8607bd4/styles/open-sans-v17-latin-regular.woff
These only occur on Firefox on our Macs. Fine on PC and other browsers on the Macs.
We tried a whole series of tweaks to settings to try fix this.
I have tried resetting Firefox and doing a fresh install but nothing fixes either issue.
Are these known issues with recent Firefox releases on Mac?
Modified
All Replies (9)
Is there any way I can raise this with the devs if no-one has any answers or suggestions here? If it's only affecting us then there must be things we can try other than what we've already tried. If others have it, it seems like a bug they should know about. thanks
As a Windows person, I'm not sure I can guess what might be different on Mac, but as a basic starting point:
For #1, if you Command+A to select all, is there white text for the th cells or are they blank or just contain spaces, etc.?
You probably are familiar with Firefox's Inspector tool. If you inspect one of the th cells, what font does Firefox say it is using in the "Fonts" panel on the right side of the Inspector? (Sometimes you may need to click a little downward pointing triangle to switch to that panel.)
For #2, is it this one: https://addons.mozilla.org/firefox/addon/wave-accessibility-tool/ You might want to send them a note using https://wave.webaim.org/feedback
Sorry, just looked at your second screenshot. When you determine the font Firefox is using, my question would be why the Regular weight works but the Bold weight does not.
Hi jscher,
The second screenshot may be misleading. I think Firefox is just bolding those because they are TH cells. If I take the style out again (as per the first screenshot) and manually mark the text in the THs as bold then they still aren't rendered.
Select All doesn't show any text in the TH cells.
I did report the issue about the WAVE plugin to the makers but they were unable to reproduce it on their Macs.
Seems like it is something unique to the Macs we use in our office.
I've tried setting dom.security.sanitizer.enabled to false in about:config but am still getting "downloadable font: rejected by sanitizer" errors in the console. I'm not sure how that is possible if it is turned off?!
I'm out of ideas of what else to try.
darrenj1 said
The second screenshot may be misleading. I think Firefox is just bolding those because they are TH cells. If I take the style out again (as per the first screenshot) and manually mark the text in the THs as bold then they still aren't rendered.
I mentioned it because traditionally there are separate physical font files for regular, bold, italic, and bold italic faces of a font. It's possible for one of them to be corrupted or unusable while the others still work normally. If two different computers are affected, that seems like likely unless you also both have a program that might have replaced Firefox-compatible font files with ones it can't use (like Adobe Type 1 fonts).
What are your default Serif and Sans-serif fonts in Firefox? On the Settings/Preferences page, if you slowly type font into the tiny search box, Firefox should filter to the relevant section. Then you can click the "Advanced" button to find this information. Does it make any difference to change these to Times New Roman and Arial?
I've tried setting dom.security.sanitizer.enabled to false in about:config but am still getting "downloadable font: rejected by sanitizer" errors in the console. I'm not sure how that is possible if it is turned off?!
That preference is related to making user-generated HTML "safe," so you can turn that back on. (https://wicg.github.io/sanitizer-api/). There doesn't seem to be a toggle for the font sanitizer any more.
When I test a page with the WAVE extension, I get three font sanitizer messages:
- downloadable font: rejected by sanitizer (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:2) source: moz-extension://b269cde4-5d56-4a78-b3a4-5cf1e159d5bf/styles/open-sans-v17-latin-regular.woff2
- downloadable font: incorrect file size in WOFF header (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:3) source: moz-extension://b269cde4-5d56-4a78-b3a4-5cf1e159d5bf/styles/open-sans-v17-latin-regular.woff
- downloadable font: rejected by sanitizer (font-family: "Open Sans" style:normal weight:400 stretch:100 src index:3) source: moz-extension://b269cde4-5d56-4a78-b3a4-5cf1e159d5bf/styles/open-sans-v17-latin-regular.woff
The report pane drops back to using Arial instead. Anyway, I don't think this is related to the main issue.
Hi Jscher,
Defaults were Times and Helvetica respectively. Changed these and it didn't help. However, I noted that WAVE is setting Helvetica as the second font option if Open Sans failed and it is setting font-weight 300...
- sidebar_container, #report_container, #wave5topbar {
font: 14px "Open Sans", Helvetica, sans-serif; font-weight: normal; font-size: 14px; font-weight: 300;
}
Turning off the font-weight: 300 revealed the text. Also, removing both Open Sans and Helvetica made it appear.
We have now re-sourced and reinstalled Helvetica which has fixed the issue.
Useful to note that you also get the santizer console messages. Checking on a PC I also see that. I will feed that back to WebAim as there's no point in their extension calling fonts that revert to defaults.
Many thanks for your help with this.
The fix for that console sanitizer issue is to download Open Sans from Google ( https://fonts.google.com/specimen/Open+Sans ) and reinstall it. It fixed the issue on Mac and PC for us. Perhaps they changed this font at some point and the local copy we had was still the old one?
It's good to hear you worked out the issue with WAVE.
In your original screenshot, I think you demonstrated a separate problem where the table header cells (<th>) were invisible. The regular cells in that image use a serif font, which I'm guessing was Times. Are those still a problem?
The TH was defaulting to the broken Helvetica, so the font update fixed it.