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

Spilter pro asked 5 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 5 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 5 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


MDBootstrap staff answered 5 years ago


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


petergasser free answered 5 years ago


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.


Piotr Glejzer staff answered 5 years ago


petergasser free answered 5 years ago


Same problem here Firefox 66.0.5 WIN7, some fix?


magikweb priority answered 5 years ago


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.


Spilter pro answered 5 years ago


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 5 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 5 years ago

Thank you!

Regards,
Karim



Please insert min. 20 characters.

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
Tags