Fonts on new BBC News page are distorted
Recently the BBC revamped its News pages. When viewed on a Desktop PC with a screen resolution forced down to the equivalent of 1366x768 the smaller fonts look sharp.
However, if I view the same page on a laptop with a screen resolution of 1366x768 the fonts are distorted and broken. I have combined two screenshots to show the problem.
On the left of the image below is a closeup of the laptop view and on the right is the same page when viewed on a desktop with the screen resolution altered to give a vertical res of 768.
https://dl.dropboxusercontent.com/u/812217/Laptop_Desktop_Screenshot.png
I tried to upload an image but the hourglass just kept rotating. I have checked the font settings for both PCs are they are identical. So are the visual settings for Windows 7 on both PCs.
I tried searching to see if others have reported the problems I see but couldn't find anything. I'm baffled as to why the BBCsite would look so bad. I hope you can assist.
Thanks, Ray.
Chosen solution
From what I can see, Freesans is not a downloaded font but one that Firefox would need to find on your system. If you check the Windows Fonts folder (or Fonts Control Panel), do you see it there? I'm not sure how it would have gotten installed, but maybe it can be removed...
In another thread, a method was proposed to substitute a locally installed font for one specified by a website. That is to apply a custom style rule (using either the Stylish extension or a userContent.css file) along these lines:
@font-face { font-family: "Freesans"; src: local("Arial"); }
I haven't tested it myself.
Read this answer in context 👍 1All Replies (14)
I have tracked the problem down to the Free Sans font used extensively on the BBC News site. The problem is also there with IE11 but not with Chrome.
I don't want to move from Firefox so I hope this gets brought to the attention of the developers who can correct the problem.
You can try to disable hardware acceleration in Firefox.
- Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
You need to close and restart Firefox after toggling this setting.
It made no difference sadly but thanks for the help. I'll try updating my graphics drivers as every other PC I have with Firefox shows the BBC News pages fine.
What font is Firefox using? Is that the same in both cases?
You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer). You can check the font used for selected text in the Font tab in the right pane of the Inspector.
Hi again. The driver update made no difference sadly.
The font in use is Free Sans used as "FreeSans".
Does it make a difference if you zoom the page in a bit?
You may have zoomed web page(s) by accident. Reset the page zoom on pages that cause problems.
- View > Zoom > Reset (Ctrl/Command+0 (zero))
Did you make any changes to font settings?
- Tools > Options > Content : Fonts & Colors > Advanced
Here is another thread that discusses similar artifacts:
Do other font show a similar distortion?
You can do a font test to see there are fonts that have issues.
I'm aware of the zoom control and had checked it was set to default (CTRL+0). The fonts only became clear after 3 presses of Ctrl++. But they were too big then of course.
I'm attaching a screenshot of the settings. Pretty sure they're the defaults.
No other fonts show this problem. I visit many web sites and they are all fine. It's only the BBC one that has this problem.
Using that font checker Free Sans shows just fine. That's not bolded text of course unlike the BBC's which is.
Thanks for your continued help. It must be as frustrating for you as me. Just to reiterate resolution is 1366x768 on a 15" Acer TravelMate P653 laptop with Win 7 Pro installed.
You could try this extension:
- Anti-Aliasing Tuner: https://addons.mozilla.org/firefox/addon/anti-aliasing-tuner/
Note that the default minimum font size is none.
I've installed it but don't really understand how it works. I tried a few different options but it made no difference.
I'm grateful for your help but it looks like we're running out of options.
I'm returning to this with some updated info. I had assumed that the font used on the BBC News pages would be the same irrespective of which computer I used to view them.
It turns out that the desktop PCs which displays the pages fine use Arial Bold for the headline whereas my laptop uses Free Sans.
It's Free Sans that's causing the problem. Is the decision to use a different font the BBC's or Mozilla's?
How can I get it to use Arial Bold?
Seçilmiş Həll
From what I can see, Freesans is not a downloaded font but one that Firefox would need to find on your system. If you check the Windows Fonts folder (or Fonts Control Panel), do you see it there? I'm not sure how it would have gotten installed, but maybe it can be removed...
In another thread, a method was proposed to substitute a locally installed font for one specified by a website. That is to apply a custom style rule (using either the Stylish extension or a userContent.css file) along these lines:
@font-face { font-family: "Freesans"; src: local("Arial"); }
I haven't tested it myself.
Thanks for your help. It was listed in Fonts as Freesans Medium. I deleted it and then loaded up the BBC News page.
Result! The font is now smooth and it's using Arial Bold. What application has installed this font remains a mystery. I suppose if I find something doesn't look quite right then it may be down to the missing font.
It's very strange when I have the option to use the website's fonts but it still chose an different one.
Anyway, this is now fixed so thank you for your help.
Glad to hear that worked. Actually, BBC's preferred font order starts with two fonts that are not normally found on Windows systems, but are found on some Linux distributions. Maybe they have a lot of Linux users.
- Helmet
- Freesans
- Helvetica
- Arial
- sans-serif (Firefox uses the default set in Options)
I suppose they are trying to make their pages compatible with many devices including iPads, mobile phones as well as desktop and laptop PCs.
Must be a nightmare!