Roboto font looks jagged on Firefox+Windows on older Machine

Topic: Roboto font looks jagged on Firefox+Windows on older Machines

Spilter pro asked 6 years ago

Hello, I noticed before that applications build on MDB(Pro) look strange on my computer, with the Roboto font having very jagged edges. Even your own mdbootstrap.com website. I can't seem to inline screenshots in this editor (only links to images), so I will try to describe the situation. If you can provide me with a way to upload screenshots, I will.. I thought the problem was my computer, so I didn't pay it much attention, until I saw that the same thing happened on many machines we tested our software on. It turns out that Firefox (both normal build and developer version) since recently(?) no longer has anti-aliasing enabled by default when running on older machines. The version of Roboto that ships with MDB is a bit 'squashed' and that squashing makes it look very strange without anti-aliasing. When I use Chrome, that has anti-aliasing enabled, everything looks a lot better. Also, when I manually enable anti-aliasing on Firefox, or use a more recent Windows 10 computer or Mac, Firefox automatically enables anti-aliasing and everything looks like on Chrome. So, is this a MDB problem? Yes, because if I download Roboto from fonts.google.com and replace the .ttfs of MDB with those downloaded and alter the .css to only look at those .ttfs everything looks clean and sharp, even without anti-aliasing. So it's the 'squashed' version of Roboto that ships that really needs anti-aliasing to be displayed properly. And even with anti-aliasing, the downloaded version looks a lot better. The problem that I describe does happen a lot. On many of the Windows 7 + Firefox machines i've tested (and there still are a lot out there) applications made with MDB turn out really unpleasant. I can fix it for now by using the downloaded font, but I don't want to merge every new release of MDB.. Will you be updating the font(-version) that ships with MDB any time soon? With kind regards, Karim / Spilter

Piotr Glejzer staff commented 6 years ago

Hello,

Its weird situation, do you have some errors in your console?

You can use that site to upload the images to show screenshots.

https://imgbb.com/

Best,

Piotr

Spilter pro commented 6 years ago

Hello Piotr,

Thank you for replying. I've attached a comment below with inline screenshots.

(No, there are no errors in the console)

Regards,
Karim

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Hi,

thank you for contributing to solve this problem. We are aware of this font behaviour and will try to fix it in future, but for now your temporary solution is simple and effective. As Piotr Glejzer said this is mainly the windows problem and we need to understand how to deal with it.

For now I believe this is all I can tell you.

Best Regards, Piotr

Add comment

petergasser free answered 5 years ago

0 0 Best answer

Hello after trying it out I have a temporary solution ..the problem is directly related to the font size. if you change it e.g. : 1.25rem then the font error is almost not visible.

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

did you guys see related posts on stack overflow or similar website?
this is a problem with windows
https://superuser.com/questions/941958/fixing-bad-fonts-in-web-pages-in-firefox-on-windows-7
https://stackoverflow.com/questions/37301132/chrome-overall-font-rendering-issue-2016/39167439#39167439
https://stackoverflow.com/questions/19279461/web-fonts-look-choppy-in-firefox-only

Add comment

petergasser free answered 5 years ago

0 0 Best answer

Same problem here Firefox 66.0.5 WIN7, some fix?

Add comment

magikweb priority answered 5 years ago

0 0 Best answer

Hello MDB, Was there a fix for this issue? We are reproducing the same issue with MDB 4.7.5 on Firefox + Windows 7.

Thank you!

Piotr Glejzer staff commented 5 years ago

Which version of Firefox do you use?

magikweb priority commented 5 years ago

Didn't see your comment, sorry. Windows 7 with Firefox 66. I just retried on Firefox 67 and it has the same issue.

Add comment

Spilter pro answered 6 years ago

0 0 Best answer

Hello Piotr,

Here are some screenshots (follow the link to see them at 100% zoom to really see the jagged artifacts):

This post on mdbootstrap.com (Firefox, Windows7, older machine, no anti-aliasing):

The same post on mdbootstrap.com (Chrome, Windows7, anti-aliased):

So you see that anti-aliasing fixes the font a little bit and it's not so noticably 'wrong', but still it's not really OK.

A couple of screenshots from a test-application:

mdb-roboto, Firefox, Windows7, no anti-aliasing:

mdb-roboto, Chrome, Windows7, anti-aliased

google-webfont-roboto, Firefox, Windows7, no anti-aliasing

google-webfont-roboto, Chrome, Windows7, anti-aliased

So, you see that the Roboto-version downloaded from Google is crisp and clear, even without anti-aliasing.

My conclusions:
<ul>
 	<li>the version of Roboto that is shipped with MDB is somehow 'wrong'. Maybe corrupted or and old version</li>
 	<li>it seems a bit squashed at the top</li>
 	<li>it may go unnoticed when using anti-aliasing as was the standard on pretty much all machines, but since Firefox now seems to disable anti-aliasing on older machines (<a href="https://support.mozilla.org/en-US/questions/1167092" target="_blank" rel="nofollow">https://support.mozilla.org/en-US/questions/1167092</a>) it starts to get really noticable</li>
 	<li>even with anti-aliasing the version of Roboto directly from Google looks better (a bit less squashed at the top)</li>
</ul>

Please insert min. 20 characters.

Hello Piotr, Here are some screenshots (follow the link to see them at 100% zoom to really see the jagged artifacts): This post on mdbootstrap.com (Firefox, Windows7, older machine, no anti-aliasing):

The same post on mdbootstrap.com (Chrome, Windows7, anti-aliased):

So you see that anti-aliasing fixes the font a little bit and it's not so noticably 'wrong', but still it's not really OK. A couple of screenshots from a test-application: mdb-roboto, Firefox, Windows7, no anti-aliasing:

mdb-roboto, Chrome, Windows7, anti-aliased

google-webfont-roboto, Firefox, Windows7, no anti-aliasing

google-webfont-roboto, Chrome, Windows7, anti-aliased

So, you see that the Roboto-version downloaded from Google is crisp and clear, even without anti-aliasing. My conclusions:

the version of Roboto that is shipped with MDB is somehow 'wrong'. Maybe corrupted or and old version
it seems a bit squashed at the top
it may go unnoticed when using anti-aliasing as was the standard on pretty much all machines, but since Firefox now seems to disable anti-aliasing on older machines (https://support.mozilla.org/en-US/questions/1167092) it starts to get really noticable
even with anti-aliasing the version of Roboto directly from Google looks better (a bit less squashed at the top)

Piotr Glejzer staff commented 6 years ago

Hi,

thank you very much for your description to fix the problem and general description of the problem. We will check that and try to fix as soon as possible.

Best,

Piotr

Spilter pro commented 6 years ago

Thank you!

Regards,
Karim

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: PC
Browser: Firefox
OS: Windows
Provided sample code: No
Provided link: No

Spilter

Pro User 15Support score
1Questions 1Answers 0Snippets