Web page displays graphics intead of text
I have encountered one web site that has several pages that display as graphics instead of text. I have visited this site before several months ago and the display was accurate then. The first image is how it looks now. The second image is how it looked several months ago. I am running Ubuntu 20.04.2 and Firefox 89.0.2. It's very strange that this is the only page that displays this way. I checked the page in Chromium and it displays correctly in that browser. Is this Firefox or quirky html?
Chosen solution
cor-el said
That is weird. If I use the Inspector then I see that this website specified a 'dingbat' font and that is apparently what you get instead of readable ASCII text..Style33 { font-family: 'ZapfDingbatsITC', 'Zapf Dingbats'; font-size: 24px; color: #9652FC; word-wrap: break-word; }
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.
After poking around with Inspector (never used this before), I see what you mean. Both Style32 and Style33, which show up repeatedly throughout the body of the text, are Dingbat. BUT, for that same text, Chromium displays text. The developer tool for Chromium is different and I can't find the styles in that tool but the style it is using must be a different font family.
Read this answer in context 👍 0All Replies (6)
That is weird. If I use the Inspector then I see that this website specified a 'dingbat' font and that is apparently what you get instead of readable ASCII text.
.Style33 { font-family: 'ZapfDingbatsITC', 'Zapf Dingbats'; font-size: 24px; color: #9652FC; word-wrap: break-word; }
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.
I suspect that was not intentional, but an error by their web design software.
Perhaps it would help to restrict the locally installed fonts Firefox uses for rendering sites. Here's how:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
(2) In the search box in the page, type or paste layout.css.font-visibility and pause while the list is filtered
Note: before Firefox 94
(3) Double-click the layout.css.font-visibility.level preference (or click the pencil button) to display an editing field, and choose a lower value, then press Enter or click the blue check mark button to save the change.
Note: starting in Firefox 94
(3) Double-click the layout.css.font-visibility.standard preference (or click the pencil button) to display an editing field, and choose a lower value, then press Enter or click the blue check mark button to save the change.
These are the recognized values:
- 1 = only expose base system fonts
- 2 = also expose fonts from optional language packs
- 3 = also expose user-installed fonts (default)
More info on about:config: Configuration Editor for Firefox.
Modified
Chosen Solution
cor-el said
That is weird. If I use the Inspector then I see that this website specified a 'dingbat' font and that is apparently what you get instead of readable ASCII text..Style33 { font-family: 'ZapfDingbatsITC', 'Zapf Dingbats'; font-size: 24px; color: #9652FC; word-wrap: break-word; }
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.
After poking around with Inspector (never used this before), I see what you mean. Both Style32 and Style33, which show up repeatedly throughout the body of the text, are Dingbat. BUT, for that same text, Chromium displays text. The developer tool for Chromium is different and I can't find the styles in that tool but the style it is using must be a different font family.
Works for me as well on Linux, so I'm not sure why in your case a dingbat font is used and not a font that displays ASCII text.
What font is Firefox using and what happens if you temporarily remove this font ?
You can possibly check this font in FontForge to see what Unicode ranges it supports.
Well, lo and behold, there are two versions of this page!. I must have arrived at them by different paths. Neither page formats well on display and I am sending email to the business owner informing her of the problems. The two versions use different styles for the text; the one that displays readable text specifies Helvetica font-family. Hope she can straighten this out because it could confuse her customers and potential customers.
Thanks, co-rel. You gave me an useful tool. The ultimate solution to the problem now lies with the page owner but without your assistance I couldn't have determined what was going on.