Upgrade to 14.0.1 Now font-family settings ignored for certain fonts e.g. Expert Sans
Accepts {font-family: Arial, sans-serif, verdana} etc. But {font-family: Expert Sans, Arial, sans-serif, verdana} will fall back to Arial even though Expert Sans is installed on client PC. Works pre 14.0.1 and on Safari, Chrome, IE6/7/8 etc, so this is a feature of 14.0.1 release.
Solution eye eponami
Further information: Changed font-family definition to enclose font names in quotes. Problem persists on WIn7. OK on WinXP installation.
Downgraded to FF13 and fonts are OK on Win7 now. Upgraded again to FF14.0.1 and the problem returns.
Upgraded to FF15.0.2b and the problem is resolved.
Tanga eyano oyo ndenge esengeli 👍 0All Replies (18)
What about those of us who don't have Expert Sans fonts. I get Times New Roman.
Since I can't really test your page, I will just note that any font names with spaces in them should be quoted (and of course a fallback is always a good idea). For example:
div#divHeader1 { /*ThinkSmart*/ position: absolute; top: 30px; left: 5px; background-color: Transparent; color: #00AEEF; font-family: "Expert Sans Light", "Expert Sans", sans-serif; font-size: 24pt; text-align: left; }
If you were intending for the browser to download the font using @font-face, that would be a different question.
Many thanks for your quick reply. The quotes around the font names with spaces is the fix - thanks. I see this is css compliant, though I note change in behaviour from prior FireFox versions.
Update: Later discovered that the problem relates to FF 14.0.1 on Windows 7 where the problem persists even with the quotes. There is no problem with FF 14.0.1 on Windows XP.
[Yes, there are fall-backs for more standard fonts in the production site, though this is an atypical situation where the clients are "guaranteed" to have these unusual fonts]
Ezalaki modifié
Solution eye oponami
Further information: Changed font-family definition to enclose font names in quotes. Problem persists on WIn7. OK on WinXP installation.
Downgraded to FF13 and fonts are OK on Win7 now. Upgraded again to FF14.0.1 and the problem returns.
Upgraded to FF15.0.2b and the problem is resolved.
There is a related issue where certain fonts are ignored by Firefox 14. Those are "raster" or "bitmap" fonts which do not resize in the same manner as "outline" or "vector" fonts. Perhaps that's the explanation, as this issue was addressed in Firefox 15 beta.
So... will this be fixed in FF14? The upgrade to FF15 Beta fixed the problem but that's not a solution for my users for which I don't control the browser they use. Is there an equivalent font to MS Sans Serif that wouldn't encounter this problem? (Using just Sans Serif as someone suggested doesn't avoid the FF14 issue). Thanks!
Hi bgomes, what does MS Sans Serif look like? Is it similar to Arial? By the way, in your style rule, you need to use sans-serif with a hyphen to invoke the default sans-serif font (usually Arial or Helvetica depending on your OS).
But to answer your first question, I do not expect this patch to be back-ported to Firefox 14. I think only security and crash fixes are applied to released versions lately, since their life is now only 6 weeks.
See
Using MS Shell Dlg and MS Shell Dlg 2 (Windows):
Ezalaki modifié
The font problem with Firefox 14.0.1 is very noticeable on tumblr, where every bit of text (form input fields and all) is showing up as Times New Roman for Windows users (XP, Vista, don't know about 7). It is happening to Mac users who upgraded to Firefox 14.0.1, although they also see Helvetica (the default for Mac, as Times New Roman is for Firefox Windows versions). The problem also occurs with Firefox 13.0.1. To get away from unreadable Times New Roman on tumblr, I had to downgrade to Firefox 12.
Tumblr's CSS appears to get around the "use my fonts not the website's" setting in Firefox, no matter the Firefox release. So since Firefox 13 and 14 aren't working with Tumblr's CSS, and Firefox can't use the user setting (Verdana in my case) Firefox has to fall back on Times New Roman.
I don't know why Tumblr doesn't support user defined fonts in Firefox -- don't know if it is intentional because tumblr thinks its font selection is too hipster to be overriden, or if it is due to errors.
If Firefox doesn't obey selected font settings then it is possible that you need to make the change for a different character encoding (default is Western).
Deselecting "Allow pages to choose their own colors" should always work, unless there is a problem with the selected (e.g. italic or bold) font.
- Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
I checked to make sure coding was correct. In all cases it was Western (ISO-8859-I).
"Deselecting 'Allow pages to choose their own colors' should always work."
It is not working at tumblr with Firefox (any version). It works at every other site. I have reported the problem to tumblr, but I do not expect them to take any action.
Not sure why you are bringing up the color settings. I'm not having a problem with them.
I've attached a screen shot of the tumblr page source showing their font definition. Like the issue with Expert Sans reported above, tumblr specifies a font with a space in it (Lucida Grande) and it's one I do not have (I have seven other Lucida fonts, but not that one).
Ezalaki modifié
Sorry, should have been the font settings that you can access via the Advanced button.
- Tools > Options > Content : Fonts & Colors > Advanced
- [X] "Allow pages to choose their own fonts, instead of my selections above"
The font definition as set by the website isn't that important.
What matters is what Firefox is using in this case and that is where the FontInfo extension comes in handy as it can show in current Firefox versions which font(s) are used in selected text.
Firefox should obey the font that is set as default when web page fonts are disabled, but may switch to another font if the current font can't be used for some reason.
You can use this extension to see which fonts are used for selected text.
Since the option to uncheck "allow pages to choose their own fonts" only appears after "advanced" is clicked, I understood what you meant.
Let me put it this way. What I am expecting to happen: when I uncheck "allow pages to choose their own fonts," web pages will not choose their own fonts, but use the ones I've selected. What happens instead at tumblr: my selected fonts do not get used.
To make it apparent, I selected Comic Sans for everything, and unchecked "allow pages to choose their own fonts." The results are shown in the first image below. I used sfgate.com as an example of a site where unchecking "allow pages..." works.
The second image shows the font info from sfgate using the handy plug-in you mentioned. Comic Sans, my selected font, appears.
The third image shows what I get at tumblr with the same settings I had at sfgate. As you can see, tumblr ignores my designation to use Comic Sans.
For comparison purposes: the fourth image shows tumblr font info when "allow pages to choose their own fonts" IS checked.
I have tested this with Firefox 12, 13, and 14 on Windows XP and Vista. I have tested it with multiple fonts (the font I usually designate is Verdana, but visually it's too close to Arial, so I used Comic Sans here) Tumblr ignoring the unchecking of "allow pages to choose their own fonts" happens in every instance. In short: tumblr.com breaks the Firefox option to choose your own fonts. Unchecking "allow pages to choose their own fonts" does not work at tumblr.
Please note that by tumblr I do not mean individual blogs [myblog.tumblr.com], where the fonts can be set by the blog owner, and where unchecking "allow pages..." works. The problem is at tumblr.com, and also at tumblr.com/dashboard, the dashboard being what signed in tumblr users view, and which is 90% of their tumblr "experience."
Another note: in my test, you'll notice I chose the same font for serif and sans-serif. Don't get sidetracked by that. Every version of Firefox, since it was first introduced, will happily use a single font across the board. There is no need to choose an actual serif font for "serif." The font I normally choose for both categories is Verdana.
Ezalaki modifié
I can only get Firefox to use the font that I set for the Western sans-serif font on tumblr.com
body { font:normal 14px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif; }
You need to select some text and then open the right-click context menu and select "Show fonts in selection" to see which fonts are used for that text.
If you look in "Page Info > Fonts" then all used fonts are listed.
tumblr's default fonts appear to be:
"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
I get Arial, but do you have any versions of the first 3 fonts?
Cor-el, I'm not sure if you were asking me a question. Dang this threading style. My screenshots show the information you requested: If you look in "Page Info > Fonts" then all used fonts are listed.
jscher2000, what is your OS? I'm testing with Windows Vista and Windows XP. What are your font settings? Are you going with Firefox's default settings? When testing this issue, I recommend trying to impose a font that tumblr does not use, something godawful like Comic Sans, or any script font. Then it's apparent at a glance whether or not unchecking "allow pages to choose their own fonts" had the desired result at tumblr.
Should tumblr's issue (apparently not supporting the firefox option to uncheck "allow pages to choose their own fonts" and thereby let the user choose fonts) be moved to a new topic? It has nothing to do with upgrading to 14; my apologies for tacking it on here. The tumblr issue occurs with all versions of firefox through 14.
Since tumblr's font info changes depending on whether or not "allow pages to choose their own fonts" is checked or unchecked, my hunch is that tumblr's ignoring the "allow pages" option is due to errors in code at tumblr. Presumably, if tumblr were intentionally ignoring the setting, the font info would not change.
The images I've attached show:
1. Tumblr font info when "allow pages to choose their own fonts" is checked
2. Tumblr font info when it is unchecked. Although I have chosen "Comic Sans" in the advanced settings, tumblr substitutes Arial.
3. My font settings, and a page in the background (sfgate) as an example of a website that works as expected: it does not ignore unchecking "allow pages to choose their own fonts", and uses Comic Sans.
Hi mikopet, that was Windows 7. I do not have any Helvetica fonts on the machine. Do you?
I agree there is "something about Tumblr" and that whatever that is probably is a subject for a different thread.
I do not have Helvetica installed. As you know, it doesn't come standard with Windows OS (you have to buy it); it is standard on Macs.
Using Firefox 12 for Windows Vista, I'm getting the same global CSS at tumblr as you are.
I thought it was typical to tailor CSS to a user depending upon browser detection, handing Mac users CSS with Helvetica and handing Windows users Arial or another standard Windows font. I'm not seeing any browser detection happening at tumblr; do you? Huh. That would explain tumblr's complete lack of excitement when I bring up browser specific problems.
If CSS is "robust" it is certainly possible to get by without browser detection, but tumblr doesn't seem to be doing so successfully. Tumblr does differentiate between computer browsers and mobile browsers at the very least; they offer an app for android/kindle (but the app does not work at all; people are unable to sign in. Probably because tumblr has an animated password field *head desk*).
I'm afraid the resolution to this problem may be "tumblr sucks" and "tumblr needs to get hit with the ADA bat."