On a site that specifies the base font size as 75%, Firefox refuses to follow that and shows everything at 100% font size; other browsers show fonts at 75%.
In Options, I have set Firefox to allow a site to change the default 16px font size, and before the last FF update, all was well. As I said in the initial statement of the problem, Edge and Chrome show the base font size at the stated 75%. Obviously I can change this everytime I visit the site, but that should not be necessary. I have no zoom ad-ins installed.
All Replies (15)
By default Firefox saves zoom factors on a per site basis. If for instance you set a particular zoom setting whilst viewing this forum Firebox should use that setting whenever you reopen any page from this forum. For more information please see the help article:
Does that resolve the problem
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
You may have accidentally zoomed web page(s). Reset the page zoom on pages that cause problems.
- View -> Zoom -> Reset (Ctrl+0/Command+0 (zero))
If you have made changes to Advanced font size settings like increasing the minimum/default font size then try the Default font size setting "16" and the Minimum font size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> Content : Fonts & Colors -> Advanced -> Minimum Font Size (none)
Make sure you allow pages to choose their own fonts.
- Options/Preferences -> Content : Fonts & Colors -> Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
It is better not to increase the minimum font size, but to use an extension to set the default page zoom to prevent issues with text not getting displayed properly.
Is this a site specific problem? You can test on the current page as follows:
Open Firefox's Web Console using either:
- Ctrl+Shift+k
- "3-bar" menu button > Developer > Web Console
- (menu bar) Tools > Web Developer > Web Console
There's a command line at the bottom (you see >> at the left). Paste the following and press Enter to run it. Any effect?
document.body.setAttribute("style", document.body.getAttribute("style") + ";font-size:75% !important");
Did you check the rules in the Inspector?
cor-el said
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
You may have accidentally zoomed web page(s). Reset the page zoom on pages that cause problems.
- View -> Zoom -> Reset (Ctrl+0/Command+0 (zero))
If you have made changes to Advanced font size settings like increasing the minimum/default font size then try the Default font size setting "16" and the Minimum font size setting "none" in case the current setting is causing the problem.
- Options/Preferences -> Content : Fonts & Colors -> Advanced -> Minimum Font Size (none)
Make sure you allow pages to choose their own fonts.
- Options/Preferences -> Content : Fonts & Colors -> Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
It is better not to increase the minimum font size, but to use an extension to set the default page zoom to prevent issues with text not getting displayed properly.
=
I have done all the things mentioned above (esp. allow the site to choose its own fonts). Here is a sample page: www.stfrancisparish.org/ministries.html. The relevant line of the stylesheet is: font: 75%/150% arial, helvetica, verdana, sans-serif;
On all other browsers I have tested, the page displays with the font at 75% of browser size (16px) and the page is sized accordingly, and Firefox formerly did the same. I am not aware of anything I have changed. Only when I set the page zoom to 80% does the page look the way it is meant to look.
jscher2000 said
Is this a site specific problem? You can test on the current page as follows: Open Firefox's Web Console using either:There's a command line at the bottom (you see >> at the left). Paste the following and press Enter to run it. Any effect?
- Ctrl+Shift+k
- "3-bar" menu button > Developer > Web Console
- (menu bar) Tools > Web Developer > Web Console
document.body.setAttribute("style", document.body.getAttribute("style") + ";font-size:75% !important");
==
I tried that, but go this error message: Expected ':' but found ';'. Declaration dropped
I see font-size:12px (75% of 16px) in the Inspector for the body and elements that specify font-size:100%.
What font settings do you see if you check that?
You can right-click and select "Inspect Element" to open the Inspector ("3-bar" menu button or Tools -> Web Developer) with this element selected.
You can check the font used for selected text in the Font tab in the right pane of the Inspector. Set devtools.fontinspector.enabled to true on the about:config page to enable the Font tab.
JimD. said
On all other browsers I have tested, the page displays with the font at 75% of browser size (16px) and the page is sized accordingly, and Firefox formerly did the same. I am not aware of anything I have changed. Only when I set the page zoom to 80% does the page look the way it is meant to look.
Aha, there are two completely different things going on here:
(1) Is Firefox using 12px as the font size instead of 16px -- see attached screen shot as an example
(2) Is Firefox scaling the page to something other than the historical display default of 96ppi (pixels per inch) -- 1 "display" pixel for each "CSS" pixel, the standard zoom level in Google Chrome
For #2, Firefox will use your Windows Text Size percentage as the hidden base level of zoom. By hidden, I mean, if Windows is set to 125% (a common default setting in newer versions of Windows), Firefox shows that as 100%. In order to match other browers, you would indeed need to reduce Firefox's zoom to 80%.
However, is this a problem? Users will adjust the zoom level to suit their eyesight and display, and you don't need to do anything on your site to accommodate that.
From your perspective, to see pages in Firefox at the same size as in other browsers, you can use an add-on to alter the base zoom level. For example:
If you want to increase zoom on websites without changing the size of text and icons in Firefox's toolbar area, you can use an add-on such as one of the following:
- Default FullZoom Level
- Zoom Page (includes "fit to window" feature)
After setting your global or default zoom level, you can still fine-tune the zoom on individual sites using Firefox's standard zoom feature (keyboard shortcut or mouse wheel).
cor-el said
I see font-size:12px (75% of 16px) in the Inspector for the body and elements that specify font-size:100%. What font settings do you see if you check that? You can right-click and select "Inspect Element" to open the Inspector ("3-bar" menu button or Tools -> Web Developer) with this element selected. You can check the font used for selected text in the Font tab in the right pane of the Inspector. Set devtools.fontinspector.enabled to true on the about:config page to enable the Font tab.
When I click on the Fonts tab in the inspector, I get a display of the actual fonts used (in the body, for example), but nothing about its size. How do you get to the place that your screenshot displayed?
For #2, Firefox will use your Windows Text Size percentage as the hidden base level of zoom. By hidden, I mean, if Windows is set to 125% (a common default setting in newer versions of Windows), Firefox shows that as 100%. In order to match other browers, you would indeed need to reduce Firefox's zoom to 80%.
However, is this a problem? Users will adjust the zoom level to suit their eyesight and display, and you don't need to do anything on your site to accommodate that.
Yes, it is a problem. Most non-tech-savvy users will simply accept what they see. Many will not even know zoom exists. And why should they have to zoom the site to 80% just to see it as it was meant to be displayed? I don't understand what you are saying about Firefox's differences from all other browsers. Basically, 16px is the default; I specify 75% of that in the stylesheet because the site looks best at that font size.
JimD. said
Most non-tech-savvy users will simply accept what they see. Many will not even know zoom exists. And why should they have to zoom the site to 80% just to see it as it was meant to be displayed?
"Meant to be"? The world has such a wide range of screens, I don't think it makes sense to try to dictate the number of millimeters that a character takes up in physical space. Many users have observed that text and images are larger in Firefox than other browsers. Seldom do they mention it as a complaint.
Anyway, if you want to propose that the default zoom level be changed in the future to work like other browsers, you can submit that on the following page (click the sad face):
https://input.mozilla.org/feedback/firefox
I would note it has been this way since Firefox 22, so it's surprising that it hasn't bothered you before now.
I'm not sure I understand why Firefox (which I have always thought of as a standards-compliant browser) would depart from the behavior of other browsers in how it deals with the default font size. I will reread the various responses to my question above. Is there anywhere Firefox has discussed this issue? If it happened at a certain version number, there must have been reasons for it. I am quite aware of the various devices people use these days for viewing websites, but when I am gently chided for wanting a certain relationship between font size and the look of the site, I guess I want to say that while users are free to do whatever zooming they wish, I want to present as the default (my 75%) the best-looking site I can. I think 16px is very coarse-looking and makes the site look crowded.
Hi Jim, the change was made to better adjust the default zoom level to high resolution screens.
...when I am gently chided for wanting a certain relationship between font size and the look of the site, I guess I want to say that while users are free to do whatever zooming they wish, I want to present as the default (my 75%) the best-looking site I can. I think 16px is very coarse-looking and makes the site look crowded.
Zoom is proportional (unless one modifies the default setting and uses "text-only" zoom), so the relationship between the size and position of text and white space should remain identical regardless of the zoom level, assuming the user's window is wide enough. Your responsive theme will rearrange the content if it is zoomed too large for the window.
Do the second and third screenshots look more coarse or crowded than the first?
It may be worth remembering Firefpx is used on all sorts of screen sizes. Firefox works on tablets and Android smartphones. The Firefpx desktop has a usefull tool built in to it the responsive design view.
A major use for that is to see what your website would look like on a phone. However you can also just try different screen resolutions, sizes and aspect ratios.
to jscher2000: About the screenshots, I must say yes, to me the first one has the space I envisioned for the site. It maintains that white space as it becomes smaller (until it gets to the point that it uses a different layout). As I said yesterday, I reread all the comments in this thread and did some more investigating. I now think I understand what Firefox is doing, though not sure why it chose to be different from all other browsers. I have found a possible solution on Stackoverflow.com, where others have complained about this FF issue. There is apparently a media query that can be added to the style file that will force FF to act like all other browsers (obviously it would still leave users free to zoom as they wish, but they would be starting from my default). I have not had time to try this media query yet--for the simple reason that in experimenting with my screen resolution, I fouled up my display beyond hope and had to go back to Windows 7 and then install 10 again. That was today's fun activity.