5

Every time I open a programming site on my Samsung Zflip 4 (both Chrome and Firefox browsers), I am seeing something like this: enter image description here

while iOs users are enjoying the luxury of this: enter image description here

Another example, and basically any other site with monospaced fonts.

Is there a way to fix other than istalling a bunch of random "font manager" apps, none of which does the thing?

Improve this question
12

2 Answers 2

Reset to default
4
+100

TLDR:

  • There is a known bug in the Android system fonts.
  • Apple makes sure that the same fonts/font files are used across devices/OS versions.
  • Web browsers usually use system fonts for rendering so a custom browser with a font fallback configuration may work.
  • Other Android apps that use the Android system fonts may encounter the issue.
  • Only Google or the device manufacturer can add/modify the font files unless the device is rooted.

Android locks down system fonts, issues with fonts that aren't handled by the website or a particular browser will require root to modify system font files or a different browser that can handle font selection differently. Apple ensures the same fonts across their ecosystem so web developers on a Mac will see the same fonts on iOS devices.

Detailed Answer

So as discovered unicode box-drawing does not render correctly in browsers so websites using box-drawing or ASCII art unicode characters need to be aware of how monospace characters/fixed-width fonts are rendering on a variety of devices/OS variants.

Browsers generally use the system fonts to do the rendering.

On Android there are a limited set of predefined font families provided known as Roboto and Noto

Apple has defined a large set of fonts to exist across their platforms (iOS/MacOS/AppleTV) so that those using browser based developer tools won't see any differences across the Apple platforms:

Taken from: https://developer.apple.com/fonts/system-fonts/ on 2024-05-03

American Typewriter 16.0d2e4 iOS macOS tvOS

American Typewriter Bold 16.0d2e4 iOS macOS tvOS

American Typewriter Condensed 16.0d2e4 iOS macOS tvOS

American Typewriter Condensed Bold 16.0d2e4 iOS macOS tvOS

American Typewriter Condensed Light 16.0d2e4 iOS macOS tvOS

American Typewriter Light 16.0d2e4 iOS macOS tvOS

American Typewriter Semibold 16.0d2e4 iOS macOS tvOS

What this means though is that users of Linux or Windows may see different font files used for fixed-width fonts unless the website developer is aware of such things. An unaware web developer using PC browser tools checking for mobile layout will still the fonts that are on the PC, thus when checking on a real device with different font files will see undesirable results.

Does Google/Android know a problem exists with box-drawing and ASCII art?

Based on issue ticket: Several metrics issues in Roboto Mono worth fixing together the font team is aware of problem however based on this comment there may be no easy fix from the font team.

So wait does this affect all Android apps?

Yes. Unless the Android app author includes their own fonts for box-drawing / ASCII art the app will use the system default fonts with the problem. Attempting to 'hack' the app and add fonts involves changing the code of the app to use the new specific font files rather than the default system fonts.

Okay so can I add the correct fonts to my Android device

Fonts are basically a tiny programs that draws what you see. Android locks down system fonts as they consider it an attack vector so unless you root your device to change fonts OR Google/Samsung/the device manufacturer adds/overrides the existing system fonts those errant font files will exist. As browsers use the system fonts as convention for fallback, a browser not following font fallback convention or has a setting/plugin for override would be an option.

And if I can't/won't root my device unless the website author or Android app author adds support for a font that handles box-drawing/ASCII art on Android devices, its going to look bad?

Correct, sadly that is the case.

Resources/References

Really Good, Bad UTF-8 example test data (closed)

Default font set on Android

How to prevent different browsers rendering fonts differently?

Android Monospace doesn't behave as a fixed-pitch

How do I fix monospace spaces not being correct width in Android Chrome/Firefox?

Why has Android made it impossible to install system fonts?

Improve this answer
1
  • 1
    I learned yesterday that this issue also present in Slack and Telegram apps for Android (source code display feature, uses monospaced font), so browsers and webtools are actually irrelevant here. Otherwise great answer.
    – Alexei Sosin
    Commented May 4 at 7:03
0

I tried that with 5 browsers on my Samsung Note 20 and on Windows 10. Which means it is not a browser issue. Its an issue with the site. It has specified a font that does not exist naturally on Android. If it worries you, you need to install that font on your mobile.

Alternatively, request the author of the page to fix it. It is normal to specify alternate fonts that can be used on your web pages.

Improve this answer
2
  • I think this is not true, I am seeing a font family specified on that element which means client browser is free to choose whatever is in the system as long as it is monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
    – Alexei Sosin
    Commented Apr 25 at 14:07
  • Rohit could you kindly give more details of how you are installing fonts on your mobile?
    – Alexei Sosin
    Commented Apr 25 at 14:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .