Weird font issue but only on this site

[Master Disaster]

Browser, version and OS: 

Firefox, Arch Linux

 

Steps to reproduce/what were you doing before it happened?

N/A

 

What happened?

Number fonts appear smaller compared to others

 

What did you expect to happen?

Not that

 

Link to a page where it happened, if applicable: 

All

 

Screenshots of the issue, if applicable: 

 

1TB, 2TB, 3TB, 4TB, 5TB, 6TB, 7TB

 

Any other relevant details:

Cannot replicate on any other websites or in local apps (PyCharm, VSCode etc are all fine), not exactly sure if it is an issue on this site or a screwy something on my install

 

If it's a cloudflare error, what was the ray ID from the bottom of the error page?

[Vishera]

34 minutes ago, Master Disaster said:

Screenshots of the issue, if applicable: 

 

1TB, 2TB, 3TB, 4TB, 5TB, 6TB, 7TB

That's not a screenshot...

[Master Disaster]

[RockSolid1106]

Can't replicate this on FF 97 on Windows. Pretty sure this is a Linux thing

 

[Master Disaster]

10 minutes ago, RockSolid1106 said:

Can't replicate this on FF 97 on Windows. Pretty sure this is a Linux thing

 

So then why only on this site?

[Needfuldoer]

Probably has something to do with the font packages you have installed and how the CSS is calling them. (This site may be using a different sans-serif font than the Google search box.)

 

font-family: "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 

[Biohazard777]

Scaling is off (100%),
Looks like FF (97.0.1 (64-bit)) issue:

 

Brave:

Both browsers are on the same OS:

Though I have no clue when the issue started, as I rarely use FF.

[Biohazard777]

CSS font family rule is the same in both browsers when inspecting.
FF:

Brave:

Also font-size and line-height are the same.
FF:

Brave:

 

100% scale, no zoom used inside the browsers.

Side by side (Brave left, FF right):

Weird.

[Master Disaster]

30 minutes ago, Biohazard777 said:

Both browsers are on the same OS:

 

This agrees it is a browser issue since I'm on Kernel 5.16.11 and Gnome 41/GTK/Wayland

[Nayr438]

It's how the Helvetica Font substitution font is handling that specific scaling factor, in my instance it appears to be "Nimbus Sans". 14px / 10.5 pt

 

 

Edited March 3, 2022 by Nayr438
Wasn;t paying attention to the fact that Libre-Office was substituting missing fonts.

[Master Disaster]

8 minutes ago, Nayr438 said:

It's how the Helvetica Font is handling that specific scaling factor. 14px / 10.5 pt

Interesting, when I tried to replicate this it turns out I don't have Helvetica installed at all...

 

Gonna pull it from the AUR RN.

[Nayr438]

24 minutes ago, Master Disaster said:

Interesting, when I tried to replicate this it turns out I don't have Helvetica installed at all...

 

Gonna pull it from the AUR RN.

Oops I may have been wrong, it's being substituted. I believe with "Nimbus Sans" on my machine from "gsfonts".

 

 

Figured something was up when you said "AUR" as the only font packages I have from the AUR are "aur/all-repository-fonts" and "aur/ttf-meslo-nerd-font-powerlevel10k"
 

Edited March 3, 2022 by Nayr438

[Master Disaster]

1 hour ago, Nayr438 said:

Oops I may have been wrong, it's being substituted. I believe with "Nimbus Sans" on my machine from "gsfonts".

 

 

Figured something was up when you said "AUR" as the only font packages I have from the AUR are "aur/all-repository-fonts" and "aur/ttf-meslo-nerd-font-powerlevel10k"
 

I did some digging, looks like Helvetica is an Adobe font (I was sure it was MS) and is provided by x11-fonts-100dpi however only in bitmap format, afaict the TTF Helvetica doesn't exist on Linux.

 

Anyhow, thanks for at least confirming its a weird font issue. I'm not sure exactly where it came from though as I'm sure it didn't exist yesterday (or maybe it did but I didn't see it) and now it showing on both my Laptop & Desktop.

[Biohazard777]

@Master Disaster@Nayr438

Yep that is it, installed helvetica-neu and numbers look normal in FF.

Which means Brave comes with this font.

Went to AUR, found one: https://aur.archlinux.org/packages/helvetica-neue

K... better check PKGBUILD for this one:

Seriously... impostersussy , amogus.sussy@fedora.mail

Git looks fine: https://github.com/impostersussy/HelveticaNeue

But still, I am not comfortable with having this updating with the rest of my aur packages, so right after testing if FF will work with it I uninstalled.
Then as @Master Disasteralready found out, it is not a free font... Which explains that strange aur package a little, but does that mean Brave payed for license and ships the browser bundled with the font and FF doesn't? But @RockSolid1106confirmed it works with FF on Windows... This whole things just keeps getting weirder haha.

[Nayr438]

29 minutes ago, Biohazard777 said:

@Master Disaster@Nayr438

Yep that is it, installed helvetica-neu and numbers look normal in FF.

Which means Brave comes with this font

 

If I had to take a guess, brave is probably ignoring the systems substitution, either providing its own or continuing onto the next generic font in the list. Meanwhile Firefox is probably grabbing "Nimbus Sans", at least on my machine, because the system had a substitution defined for that font as available.

[Lightwreather]

33 minutes ago, Biohazard777 said:

it works with FF on Windows... This whole things just keeps getting weirder haha.

Works on FF nightly too on macOS,

tho Helvetica ships as a system font in macOS, so…

[Biohazard777]

58 minutes ago, J-from-Nucleon said:

tho Helvetica ships as a system font in macOS, so…

Yeah I just checked myself, it is included (haven't installed any additional fonts on my Mac):

Spoiler

 

1 hour ago, Nayr438 said:

If I had to take a guess, brave is probably ignoring the systems substitution, either providing its own or continuing onto the next generic font in the list. Meanwhile Firefox is probably grabbing "Nimbus Sans", at least on my machine, because the system had a substitution defined for that font as available.

But on Windows 11 it isn't included.

Spoiler

And yet it looks fine...

I checked the network request, only Font Awesome and Material Icons are dynamically loaded, so it isn't that (unless I missed it).

Spoiler

So yeah, I guess either FF excluded the that font in their Linux build or FF chooses a different substitute font on Windows.

[Master Disaster]

1 hour ago, Biohazard777 said:

@Master Disaster@Nayr438

Yep that is it, installed helvetica-neu and numbers look normal in FF.

Which means Brave comes with this font.

Went to AUR, found one: https://aur.archlinux.org/packages/helvetica-neue

K... better check PKGBUILD for this one:

Seriously... impostersussy , amogus.sussy@fedora.mail

Git looks fine: https://github.com/impostersussy/HelveticaNeue

But still, I am not comfortable with having this updating with the rest of my aur packages, so right after testing if FF will work with it I uninstalled.
Then as @Master Disasteralready found out, it is not a free font... Which explains that strange aur package a little, but does that mean Brave payed for license and ships the browser bundled with the font and FF doesn't? But @RockSolid1106confirmed it works with FF on Windows... This whole things just keeps getting weirder haha.

Installing this font clears the issue. I was a tad reluctant to pull it myself, had bad luck with AUR fonts in the past but it works so....

 

Just to be safe though, I'll add it to the update ignore list

 

Edit - Now I'm just waiting for Mortis to come in, laugh and tell us he knew what the issue was and how to fix it already

[Nayr438]

1 hour ago, Biohazard777 said:

Yeah I just checked myself, it is included (haven't installed any additional fonts on my Mac):

  Reveal hidden contents

 

But on Windows 11 it isn't included.

  Hide contents

And yet it looks fine...

I checked the network request, only Font Awesome and Material Icons are dynamically loaded, so it isn't that (unless I missed it).

  Reveal hidden contents

So yeah, I guess either FF excluded the that font in their Linux build or FF chooses a different substitute font on Windows.

Windows may not have a substitute defined, or has one that better matches the original, but the next generic font is "Arial" which is a Windows font as far as I'm aware.

 

5 hours ago, Needfuldoer said:

 

 

font-family: "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 

 

[WolframaticAlpha]

6 hours ago, RockSolid1106 said:

Can't replicate this on FF 97 on Windows. Pretty sure this is a Linux thing

 

On a different, unrelated tangent, a large number of my websites render improperly and now i have to use a uniform font everywhere. It breaks sites like google news.

[Nayr438]

6 hours ago, Master Disaster said:

Installing this font clears the issue. I was a tad reluctant to pull it myself, had bad luck with AUR fonts in the past but it works so....

 

Just to be safe though, I'll add it to the update ignore list

 

Edit - Now I'm just waiting for Mortis to come in, laugh and tell us he knew what the issue was and how to fix it already

 

An alternative would be to swap out the substitution.

For Example.

 

~/.config/fontconfig/fonts.conf

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <match>
    <test name="family"><string>Helvetica</string></test>
    <edit name="family" mode="assign" binding="strong">
      <string>Liberation Sans</string>
    </edit>
  </match>
</fontconfig>

Which substitutes "Helvetica" with "Liberation Sans".

 

You can check it with

fc-match Helvetica

Edited March 3, 2022 by Nayr438
Swapped Alias for Match.

[colonel_mortis]

19 hours ago, Master Disaster said:

Edit - Now I'm just waiting for Mortis to come in, laugh and tell us he knew what the issue was and how to fix it already

Not sure what you're expecting to be fixed here? Different devices use different fonts, that's ok and why we have a list of fallback fonts defined. The font that your browser is falling back to looks slightly weird to you, but that's not a forum bug, just that you don't like that font.

[Nayr438]

1 hour ago, colonel_mortis said:

Not sure what you're expecting to be fixed here? Different devices use different fonts, that's ok and why we have a list of fallback fonts defined. The font that your browser is falling back to looks slightly weird to you, but that's not a forum bug, just that you don't like that font.

The only real issue is that fontconfig just so happens to have a default substitution for "Helvetica", so instead of continuing to the next font in the list, it just loads "Nimbus Sans", which just happens to look off at the set font size, but that is a issue with how fontconfig is setup and could vary between Distro's and Browsers. Not something a site can really control.

 

❯ for family in "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; do
  echo -n "$family: "
  fc-match "$family"
done
<!-- Helvetica Neue,: NotoSans-Regular.ttf: "Noto Sans" "Regular" --> Wildcard Substitution ignored by FireFox
Helvetica,: NimbusSans-Regular.otf: "Nimbus Sans" "Regular"
Arial,: Arimo-Regular.ttf: "Arimo" "Regular"
Roboto,: Roboto-Regular.ttf: "Roboto" "Regular"
Liberation Sans,: LiberationSans-Regular.ttf: "Liberation Sans" "Regular"
sans-serif,: NotoSans-Regular.ttf: "Noto Sans" "Regular"
Apple Color Emoji,: NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
Segoe UI Emoji,: NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"
Segoe UI Symbol: Cantarell-VF.otf: "Cantarell" "Regular"

 

Anyways a solution to swap out these substitutions is posted above.

Edited March 4, 2022 by Nayr438

[Master Disaster]

2 hours ago, colonel_mortis said:

Not sure what you're expecting to be fixed here? Different devices use different fonts, that's ok and why we have a list of fallback fonts defined. The font that your browser is falling back to looks slightly weird to you, but that's not a forum bug, just that you don't like that font.

Oh no. nothing at all. I just thought you'd already know exactly why it was happening without the detective work we all put in