Some sites don't have symbols unless "allow pages to choose their own fonts" is checked
With option "allow pages to choose their own fonts..." deselected, some symbols are improperly displayed.
I think I know what's happening. With the option selected, FF displays some symbol characters with the wrong font.
But, this doesn't make sense, since these symbols are not in any language font. None of them will produce the correct symbols if selected as the personal preferred font. So, it's incorrect to render these symbols in any of the fonts selected as my personal preference, regardless of status of this option.
So, FF should use the a symbol font for these symbols regardless of this preference setting.
All Replies (7)
Oh yes, more and more sites seem to be replacing icon images with custom fonts, which usually are specified with a URL for Firefox to download rather than referring to a font you might have on your system.
Currently, Firefox only has the one "all or nothing" setting for fonts: either use your preferred fonts for everything in the page, or use the page's preferred fonts. There is not currently any distinction among different kinds of fonts or different characters in the font set.
The developers have been considering options and you can read the discussion on the bug tracking site here: Bug 789788 – Not allowing pages to choose their own fonts breaks with icon fonts.
On the bug tracking site, it's generally not helpful to add comments to bugs unless there has been a request for more information from users, but you can register on the Bugzilla site and "vote" for the bug to be fixed. See:
(Note: commenting or voting may lead to getting copies of all future comments emailed to you. Depending on the nature of the comments, this may be welcome or unwelcome...)
I don't see why Firefox doesn't perform font substitution. It makes no sense to use the default font if it doesn't contain the necessary glyphs. Example:
- Save fontawesome-webfont.woff
- Convert it to TTF at everythingfonts.com
- Install the converted TTF font.
- Restart Firefox.
- Under Options - Content - Advanced, uncheck "Allow pages to choose their own fonts".
- Go to http://fontawesome.io/icon/chevron-left/
- Instead of the actual chevron symbol, there are rectangles with the Unicode codepoint, even though that symbol is available in a local font. And yes, the converted TTF works fine; I tested on the same page with "Allow pages to choose their own fonts" checked and gfx.downloadable_fonts.enabled set to false.
Many thanks. Lots of excellent discussion on the bug jscher2000 mentioned, so I'm pleased. Gave it an up-vote.
Hi Gingerbread Man, I haven't researched how Firefox does font substitution; is it any more sophisticated than serif vs. sans-serif? I'm pretty sure there's no concept of equivalence for more decorative fonts.
For a user solution, I think you would need an extension to user script to modify the CSS @font-face rule (or related rules) to use your local copy of the font, or somehow override it.
Font substitution is something that happens on a per-glyph basis, and Firefox seems to look through all installed fonts to find a suitable one. Try the following code on a W3schools editor page:
<!DOCTYPE html> <html> <body> <span style="font-family:Arial !important;">I ❤ Firefox</span> </body> </html>
The Font Information add-on reveals that the heart (U+2764) is rendered using a different font than rest of the text. This makes sense, since Arial doesn't contain that glyph (the same would happen with sans-serif or serif instead, unless you have an all-encompassing font like Code 2000 as your default).
What I find puzzling is that this doesn't happen when "Allow websites to choose their own fonts" is unchecked. From the bug report you linked to, comment 34, that option makes Firefox set font-family:sans-serif (or serif, whichever is the user's default) everywhere on the page.
But as you've seen above, when this is done by a web page, Firefox will still use a different font when the one specified doesn't contain the required glyphs. Why would a user-set option be any different? It's not like any user's intention was, "Definitely use this font and no other, even if you can't render the characters in question".
Edit #2: I'm fairly sure I figured out what the issue is. In the case of font-family: sans-serif, whether specified by the site (e.g. Wikipedia), or by unchecking "Allow websites to choose their own fonts", Firefox will only look for an appropriate font in among sans-serif fonts.
In my previous tests, I had two appropriate fonts, Symbola and Code2000, neither of which is sans-serif (my font viewer identifies them as "old style serif" and "symbolic", respectively).
Ti ṣàtúnṣe nípa Gingerbread Man
I don't see why the most recent bug solution suggestions are so complicated.
The preferences allow the user to override three generic fonts, i.e. sans, serif, and monospace. The problem fonts aren't any of those. So, all we need is a separate override option for these remote fonts.
yes/no : download and use page-specified downloadable fonts
I don't see how this breaks the current preference paradigm. I might have to comment on the bug, even though it's against etiquette. Hasn't made much progress in a while.
You can accomplish what you want with a user style. Here are step-by-step directions. If you need any more help, just ask.
- Leave "Allow pages to choose their own fonts" enabled.
- Install Stylish.
- After Stylish is installed, open the Add-ons Manager, User Styles category.
- Click the Write New Style button at the top.
- In the style editor window, paste either of the following. Give the style a name and then click the Save button.
Variant #1
This is the easiest and safest thing to do. It applies your default sans-serif font to all sites, except those you specify. To specify exceptions, replace the placeholders with actual domain names. To add new exceptions, add another | symbol followed by the domain name.
@-moz-document regexp("https?://(?!(example-of-an-exception.com|www.placeholder.site-exception.net)).*") {
* { font-family: sans-serif !important; }
}
Variant #2
This requires a bit of work on your part. You must know the font that's being used to display the symbols in question. Right-click a symbol and choose Inspect Element. In the Inspector pane, click the Fonts tab. You should see the font family names listed there, labeled with "remote". The actual font family name is below, under "Used as:".
You're going to want to specify your ideal font first, then the site's fonts after that. If certain characters can't be rendered with the font you want, then Firefox should fall back to the second font in the list, or the third, and so on. If none of the specified fonts contain the required characters, then Firefox will display the Unicode codepoints (rectangles with numbers in them).
@-moz-document url-prefix("http://"), url-prefix("https://") {
* { font-family: Arial, "Segoe UI Symbol", FontAwesome, PlaceholderFontOne, "Placeholder Font Two", sans-serif !important; }
}