Tumblr breaks advanced font settings in Firefox, all Win and Mac versions
tumblr.com and tumblr.com/dashboard do not support, or break, the ability to choose your own fonts in Firefox. The problem affects Firefox 12-14 on Windows OS, and may also affect Firefox for the Mac.
The problem: unchecking the option "allow pages to choose their own fonts" does not produce the expected result; the user font settings are ignored by tumblr. There is already extensive documentation of the problem in the forums including screen shots and font info.
https://support.mozilla.org/en-US/questions/932614?s=font+override+ignored+by+website&r=2&as=s
The problem is easy to recreate.
The mystery is: how is tumblr screwing up do/do not allow pages to choose their own fonts in Firefox? Is it a problem in CSS? Something else?
Athraithe ag mikopet ar
All Replies (10)
I can make Firefox use the selected default font on Linux, so it is possible.
Firefox uses Nimbus Sans L Regular instead of Helvetica
Great, cor-el. I'm going to test 15 beta for Windows; I don't expect it to work, but I have to rule it out.
The problem has been escalated to tumblr support, ticket #1116143. I'm sure the info that advanced font options work at tumblr with Firefox for Linux will be a huge help in fixing what I assume is a CSS problem at tumblr.
I have installed Firefox 15 for Windows; same problem -- Firefox advanced font options do not work on tumblr.com/dashboard.
There is an additional problem with Tumblr, which is that with Firefox for Windows and Mac releases 13-15, Tumblr does not successfully load its CSS at all, plus breaks advanced font options, so on tumblr.com/dashboard Windows Firefox displays Times New Roman, and Mac Firefox displays a mixture of Helvetica and Times New Roman. Tumblr hoped Firefox 15 would fix that particular problem; it hasn't (those of you following along may remember the problem is Firefox not recognizing some font families with spaces in the name unless the font family was enclosed in quotes).
I don't think there needs to be a separate discussion about the font family issue, however, because the bottom line is that Tumblr needs to fix its CSS for Firefox Mac and Windows (Firefox Linux works).
When you uncheck “Allow pages to choose their own fonts”, Firefox ignores the fonts specified by the web site and uses the ones you specified instead. A site cannot break this feature, since whatever fonts the site specifies are not taken into account with that option unchecked.
Which fonts are used when the above option is unchecked depends on the page's character encoding. Tumblr's is UTF-8, therefore the relevant font category is Other Languages. You can see in the following screenshots that it works just fine on Windows 7.
Gingerbread man, if you review the screenshots I linked to, you'll see examples of a website (tumblr.com/dashboard) "breaking" advanced font options in Firefox 14 on Windows Vista and Windows XP. Cor-el was able to recreate it. I'm not sure which version of Windows he used; Vista, I think.
The problem is easily recreated in Firefox 13-15 for Windows Vista, XP, and Mac, but not Firefox for Linux. If advanced font options in Firefox for Windows 7 is also okay, that's helpful information.
I've been thinking this over, and you have made an important point. There *should* be no way for a website to break the advanced font setting in Firefox, no matter what the website's CSS consists of, if the Firefox user has unchecked "allow sites to choose..."
When "allow sites" is unchecked, however, Firefox does not completely ignore a site's CSS. Firefox still uses a site's CSS for font sizes and styles (such as emphasis and strong). All unchecking "allow sites" does is replace the typeface, and size up fonts if a minimum size is specified by the Firefox user in "advanced." [I'm not going into colors; there is no problem there].
So while there are undoubtedly problems in Tumblr's CSS, I think Firefox's advanced font settings, post release 12 for Windows Vista, XP, and Mac, are playing a role.
I have found another web site which "breaks" the advanced font settings, www.sacbee.com. In addition, the problem is exactly like that at Tumblr; not only do the Firefox user's chosen fonts (Verdana in my case) not get used, but sacbee.com displays Times New Roman, even though sacbee's CSS specifies Arial, MS Sans Serif, and Georgia.
When I check "allow sites" then sacbee shows up with the fonts specified by sacbee's CSS (Arial, etc.)
I've attached screenshots. The first is what I get at sacbee.com when "allow sites" is unchecked and I've chosen Verdana in advanced settings. Firefox 15 for Vista/sacbee.com gives me Times New Roman across the board.
The second is sacbee.com when I've checked "allow sites." The site's CSS works.
Where is Times New Roman coming from, if neither the Firefox user or the web site's CSS have specified it? It makes me think it's Firefox 13-15 for Windows Vista, XP, and Mac that is the problem, because Times New Roman used to be the default font in Firefox; perhaps it still is? At tumblr.com/dashboard and sacbee.com, it's as if Firefox is failing to figure out typefaces from both the user's advanced settings, and the website's CSS, and is falling back on Times New Roman.
To summarize:
I have been testing with Firefox for Windows Vista and XP, versions 12-15. All versions have the advanced font setting issue at tumblr.com/dashboard. Version 12 works slightly better at tumblr.com/dashboard, because while tumblr.com ignores my advanced font settings, its CSS works with 12, and I see Arial as chosen by tumblr. With FF versions 13-15, not only does tumblr.com/dashboard ignore my chosen font, but its CSS also croaks, and I see Times New Roman everywhere, even in monospace.
My hunch: tumblr support isn't going to be able to fix this, because at least some of the problem is due to Firefox 13-15 for Windows Vista, XP, and Mac failing to apply advanced font settings to a website (reason unknown). Firefox for Windows 7 and Linux doesn't have the problem.
Sooner or later, someone will propose "upgrade to Windows 7!" as the fix, and if that happens I'll ask them to buy me more RAM.
mikopet wrote:
I have found another web site which "breaks" the advanced font settings, www.sacbee.com.
It's the same situation: you must edit the fonts used for Other Languages.
mikopet wrote:
I've attached screenshots. The first is what I get at sacbee.com when "allow sites" is unchecked and I've chosen Verdana in advanced settings. Firefox 15 for Vista/sacbee.com gives me Times New Roman across the board.
Double-check that you've edited the proper font category. Your previous screenshot showed Western; make sure you've done the same for Other Languages which affects Tumblr.com and Sacbee.com.
Thanks, gingerbread man. This is rather long. But I believe I have found what is "broken."
While the workaround you suggested worked at tumblr.com/dashboard and sacbee.com, it is not a solution, because:
--"Western" is the default setting in "Fonts For" in Firefox for Vista versions 12-15. Firefox users should not have to alter a default in advanced font settings because a site has specified charset UTF-8.
--UTF-8 character sets are standard. You would be hard pressed to find a site not using charset=UTF-8. There should be no need to change default options in Firefox advanced font settings so a site specifying UTF-8 doesn't break unchecking "allow sites…"
In any case, I have found how unchecking "allow sites…" gets 'broken.'
The problem is that the font.name values you can change in Firefox's advanced settings are not the font.name values tumblr.com/dashboard and sacbee.com are using. So when I choose fonts in advanced, and tell Firefox "Use this font everywhere" by unchecking "allow sites," tumblr.com and sacbee.com do not give a hoot.
I discovered this by editing the font.name values directly in about:config.
The font.name value that matters to sacbee.com and tumblr.com is:
font.name.sans-serif.x-unicode
To summarize: changing advanced font options in Firefox 12-15 for Windows Vista, XP, and Mac does not change the value for font.name.sans-serif.x-unicode when the value for "fonts for" is set to "western" -- and "western" is the default. That's what is 'broken.'
By changing "fonts for" to "other languages" the firefox user can change the value of font.name.sans-serif.x-unicode in the "sans serif" dropdown. When "fonts for" is set to Western, which is the default, the firefox user can't change the value of font.name.sans-serif.x-unicode.
By directly editing the font.name.sans-serif.x-unicode value in about:config, I can get tumblr.com and sacbee.com to use the font I want, and still keep "Fonts for" as "Western."
My guess is that the Firefox versions that do not have this problem (Linux, Windows 7) DO update the value font.name.sans-serif.x-unicode when fonts are selected in "advanced" because the default setting in "fonts for" (whatever it may be) allows the user to change the value for font.name.sans-serif.x-unicode.
This problem falls into the category "bad user experience."
Note: in case it's not clear, I'm aware "western" and "other languages" and everything else in "fonts for" are independent of each other. But Firefox users doing routine stuff (like going to tumblr.com) should be able to choose "their" fonts in a single window in advanced, and not have to switch from "western" to "other languages" to get font settings to work. "Other languages" is not exactly intuitive.
Firefox users need the ability to choose "their" fonts all at once in advanced, without having to change the "fonts for" field. Most users, told to click on "western" to change it to something else, would freak out when they saw the thirty or so options in the dropdown.
Now if tumblr.com used font.name.sans-serif.x-western all my problems would be solved....
Edit: it would also be handy if Firefox's default font for font.name.sans-serif.x-unicode was an actual sans-serif font and not Times New Roman.
Athraithe ag mikopet ar
If you want to override web site fonts, you must change the fonts for the appropriate character set. That's all there is to it. For pages with Western (ISO-8859-1) encoding, that's “Fonts for: Western”, for most Unicode (UTF-8) pages, that's “Fonts for: Other Languages”.
Unicode (UTF-8) can be any language, and Firefox doesn't seem to know which language it's dealing with unless it's explicitly specified by the page. For example, the page we're on now, which has <html lang="en-US" in its source — altering the fonts for Western is sufficient and changing for fonts Other Languages is not necessary. I think this behavior is good enough.
font.name.sans-serif.x-unicode is simply the name of the preference where Firefox stores the value of Fonts for: Other Languages; Sans-serif. There is no difference between editing that preference in about:config and changing the option in the user interface. Furthermore, Proportional must be set to “Sans serif” for the sans serif font to be the default for that category. That preference is stored as font.default.x-unicode
Gingerbread man, I'm aware the same value is being changed whether I do it through font settings or through "aboutconfig." Changing it in about:config requires far fewer steps, however, and doesn't require dealing with a 30+ option dropdown. I wrote up both methods of changing the value, and the about:config method is easier for people to follow.
Looking at tumblr.com's source, the lang= value when you are not logged in is lang="" . I attached a screenshot.
Logged in at tumblr, I get lang=US (not en-US) in the source. I attached a screenshot. It looks like tumblr uses javascript to plug in the language setting chosen by the logged in user (in my case, English).
Is lang=US accepted syntax? Not sure why tumblr isn't using en-US. Tumblr may be using a script to concatenate the primary and sub (if any) language values, and dropping the en-.