Latest Firefox Update breaks fonts
Alright, so. My website uses google font 'Montserrat' and the latest firefox update breaks it. To be honest, I'm sick of having to rollback (see notes below) because all that happens is the damn thing updates again without my permission. It's driving me nuts.
It looks absolutely awful, it's super jagged and just looks nothing like it should.
I think I've isolate at least part of what the problem might be. The 'unicode' font choice in option > content > font & colours is not there. It's stuck on 'latin' and there's no option for unicode.
I have tried fresh installs and all that jazz. The settings are correct except what I mention above. The page is allowed to choose it's own fonts, etc.
I've troubleshoot this issue quite a few times and the only thing that's fixed it is taking an old version from my husbands computer and using that.
If anyone could help shed some light on this I'd be extremely grateful as my site looks stupid without the font rendering correctly!
All Replies (19)
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
Does Firefox actually use that font if you check this in the Inspector?
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.
- https://developer.mozilla.org/Tools/Page_Inspector
- https://developer.mozilla.org/Tools/Page_Inspector/How_to/View_fonts
You can check the encoding in *View > "Text Encoding"
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))
Not zoomed.
Inspect element shows the font, firefox has always shown the font correctly until this update.
http://felixfelicishp.b1.jcink.com/index.php?showtopic=87&view=findpost&p=40539
Text encoding is UTF-8
The font looks normal to me on your site. Does it appear incorrect for you on Google's sample page as well?
https://www.google.com/fonts/specimen/Montserrat
The 'unicode' font choice in option > content > font & colours is not there. It's stuck on 'latin' and there's no option for unicode.
This should not be causing the problem. That selector doesn't affect how Firefox detects the characters set of a page, it only specifies the fonts to use once Firefox has made its choice.
Changing the selector at the top to a different character set allows you to assign fonts for that character set. Within Unicode, there is a Latin/Western section, but there also are other sections, so there isn't a single set of fonts used for Unicode, it depends on the characters.
Could you check whether you have any non-default font-rendering settings:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful.
(2) In the search box above the list, type or paste font_r and pause while the list is filtered down to about 16 items
Is anything here listed bolded and "user set"? You may want to try using right-click > Reset to restore the default value. You probably need to exit and start Firefox back up again after you complete your work to see any difference.
In another thread, a user reported that an extension had modified the gfx.font_rendering.cleartype_params.rendering_mode preference from the default value (-1) to 2, which causes fonts to look spindly/blocky like the 90s. Here's my understanding of the various values for this preference:
// -1 or 0 = use default for font & size; // 4 = Natural; // 5 = Natural Symmetric
=> Sub-pixel anti-aliasing/positioning
// 1 = aliased; // 2 = GDI Classic;
=> GDI emulation (whole pixel rendering)
// 3 = GDI Natural Widths;
=> GDI emulation with natural widths (?)
Yes. It looks incorrect there was well.
I've attached an image to show how it renders for me.
Note, I've also checked the windows settings, include cleartype, etc.
Mkay, nothing's bolded or user set. gfx.font_rendering.cleartype_params.rendering_mode value is correct (-1)
Unsure if based on your comment I need to alter anything there? Looks like everything is as it should be.
Yours does look like ClearType is working, but it's slightly off, scrunched up a bit for some reason.
Could you test in Firefox's Safe Mode? In Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, and some other advanced features to help you assess whether these are causing the problem.
If Firefox is not running: Hold down the Shift key when starting Firefox.
If Firefox is running: You can restart Firefox in Safe Mode using either:
- "3-bar" menu button > "?" button > Restart with Add-ons Disabled
- Help menu > Restart with Add-ons Disabled
and OK the restart.
Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).
Any improvement?
As I suspected, no change when in safe mode. Have uninstalled/reinstalled a number of times, which means no add-on's etc.
Much appreciate the help, btw!
When did you switch to using the 64-bit build of Firefox? I wonder whether that could be a factor.
Have you considered updating the driver software for your NVIDIA graphics? When I search on the following page --
http://www.nvidia.com/download/find.aspx
-- I see surprisingly frequent updates for this query:
Product Series: GeForce 600 Series Product: GeForce GTX 650 OS: Win 7 x64 Recommended/Beta: Recommended/Certified
(see attached screen shot)
That suggests they keep making mistakes, I mean, finding bugs, in the software. Not sure what is the safest version to try, or whether it will make any difference. ???
I did a couple of snip-captures.
If any text looks like it has color-fringing, it's because I've run Clear-Type over and over and I couldn't get rid of it. Aging ASUS monitor? (I've had it running pretty much 24/7 since Nov-2010 where the back faced West and since Oct-2014 it now faces North.)
The second image is where I zoomed-in x8.
Edit: The 'normal' size capture - the text came out slightly softer in the image than looking at the site in real-time. I find that I have to zoom-in on many pages because on my 24" monitor, the text is quite small for me. Ok, my eyes and my monitor are not quite razor sharp like they use to be. (Grin)
.
Modified
It is a little ugly with Arial and the 1px font spacing. You might have noticed when looking at the font-rendering rules that Firefox does not do sub-pixel font smoothing with Arial and a few other fonts. I've attached the comparison I see between Arial and Montserrat if I use a 96ppi zoom level (I usually zoom it 125% to 120ppi).
I've always used x64 as far as I know because I've always had x64 windows.
I'm looking into the driver thing atm, will report back when I know. I doubt it's the driver though, simply because I've never ever had the issue before.
EDIT: Slow internet, lol.
Also, no attached screenshot??
PJ - I'm not sure what it is your screenshot is supposed to show, or for what purpose? That page has no Montserrat font on it.
EDIT: not in your screenshot, anyway??
Modified
As suspected, driver is now up-to-date with no change :(
Firefox only started making the x64 build available this year, I believe. The mainstream release is still the 32-bit release for all flavors of Windows. But who knows if that makes any difference. ?!
My screenshot on the right side was created by unticking the custom style rule specifying Arial for that element so that Montserrat was used. You're right that normally people will see Arial.
Any way I can test the x64/x32 idea?
I've still not found a solution and I've noticed more websites using that font and it looks weird.
wearestarrdust said
PJ - I'm not sure what it is your screenshot is supposed to show, or for what purpose? That page has no Montserrat font on it. EDIT: not in your screenshot, anyway??
I checked my FF Options, and it is set to 'Allow pages to choose their own fonts', yet, Montserrat does not show in my 32-bit FF browser on that page.
It does on TypeCast.com, however:
(Note: Assuming everything is correct in the Page Source, I see with a search 'Montserrat' listed 4-times and 'Arial' 18-times on your referenced page-site.)
.
Modified
You can check the log in the Web Console for error messages and the Network Monitor (Firefox/Tools > Web Developer) to see if content fails to load or is possibly blocked.
Use Ctrl+F5 or Ctrl+Shift+R to reload the page and bypass the cache to generate a fresh log.
wearestarrdust said
Any way I can test the x64/x32 idea?
Maybe try the "PortableApps" build of Firefox. It installs into a folder and doesn't interfere with your current Firefox install. However, I don't think you can run them side-by-side, only one at a time. http://portableapps.com/apps/internet/firefox_portable/
Hi Pj, the page has various font rules in various places, so depending on how it's currently configured you might see Arial. I had to disable the Arial rule in the Inspector to see Montserrat.
cor-el said
You can check the log in the Web Console for error messages and the Network Monitor (Firefox/Tools > Web Developer) to see if content fails to load or is possibly blocked. Use Ctrl+F5 or Ctrl+Shift+R to reload the page and bypass the cache to generate a fresh log.
mkay so
here is the log when i did the cache bypass -- i'm not sure of the ins and outs but it does not list montserrat (the problem font) at all
note roboto loaded fine despite the error
The connection to ws://flr5.cbox.ws:8060/ was interrupted while the page was loading. jsc_1459423244.js:51:343 "The custom forum structure script suite is outdated. A new release is available, and upgrading is highly advised: https://github.com/ConnorWiseman/jcink-custom-structure" cfs.min_2014.js:7:1 Use of Mutation Events is deprecated. Use MutationObserver instead. index.php Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.7.2.min.js:3:7108 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Roboto" style:normal weight:bold stretch:normal src index:2): bad URI or cross-site access not allowed source: http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2 <unknown> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown> downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2 <unknown> Error: Permission denied to access property "toString"
montserrat still refusing to load correctly.
anymore ideas? and if not how do i then go about getting this fixed.
Modified
Try to enable third-party cookies (temporarily) or created a cookie allow exception for involved domains to see if that helps.