Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Monospace fonts on Vue Docs not working on Ubuntu #3105

Open
otabekoff opened this issue Nov 12, 2024 · 1 comment
Open

Monospace fonts on Vue Docs not working on Ubuntu #3105

otabekoff opened this issue Nov 12, 2024 · 1 comment

Comments

@otabekoff
Copy link

otabekoff commented Nov 12, 2024 •
edited
Loading

It is worth 100x than long text.
image

See this. I inspected and find that you were using a monospace font called Menlo. But even if I install it and renew font cache on my Ubunt 24.04 latest, it is not working. It is so thing and UGLY.

I hope that you will fix this issue soon.

EDIT:
I've also checked on codepen:
image

And on highlight.js:
image

and on Shiki.js website:
image

On all of these websites it is working. But not on vuejs.org
@haoqunjiang
Copy link
Member

What's your browser? Do you have any enhanced privacy features turned on, or are you browsing in a private window?
Because it looks very much like an anti-font-fingerprinting issue to me.
https://undetectable.io/blog/fonts-browser-fingerprints/

haoqunjiang added a commit to haoqunjiang/theme that referenced this issue Nov 13, 2024
@haoqunjiang
fix: put all kinds of system monospace fonts before Courier New
9e0ef82 
There are multiple issue about Courier New being awful-looking on Linux:

- [Bootstrap](twbs/bootstrap#18609)
- [Chromium](https://issues.chromium.org/issues/40260598)
- [Vue.js Docs](vuejs/docs#3105)

Courier New is only readable under Windows because [ClearType made a special case for it](https://learn.microsoft.com/en-us/archive/blogs/fontblog/why-is-courier-new-so-thin).

Therefore, it should never be one's first choice for monospace font. It should be put at the end of the list.

By the way, though Courier New is a proprietary font, it is available on Linux through [Microsoft's Core Fonts for the Web](https://en.wikipedia.org/wiki/Core_fonts_for_the_Web). That's why Linux users might see it.

In this PR I propose we set the monospace font stack to:

```text
ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', 'Noto Sans Mono', 'DejaVu Sans Mono', 'Roboto Mono', 'Courier New', monospace;
```

This puts all kinds of system monospace fonts before Courier New, with some personal preference.

- `ui-monospace` is part of the CSS Fonts Module Level 4, and [only available in Safari for now](https://caniuse.com/extended-system-fonts). The difference between it and `monospace` is that `ui-monospace` aims to match the user's system monospace font, while `monospace` is a generic monospace font that's defined by the browser. So it's better to put it first. It currently defaults to "SF Mono" on macOS.
- "SF Mono" is for macOS users who don't use Safari.
- "SFMono-Regular" is a hack before Apple made "SF Mono" available everywhere (It was only bundled with Xcode and Terminal on first launch).
- Menlo was the macOS default monospace font during 2009-2015.
- Monaco was the macOS default monospace font before Menlo.
- Cascadia Mono is the default monospace font for Windows Terminal. It's widely regarded as a modern replacement for Consolas. Its variant, "Cascadia Code", features programming ligatures. Programming ligatures is a controversial topic, and isn't average-user-friendly in the documentation, so I choose Cascadia Mono here.
- Consolas is the default monospace font in Visual Studio and VS Code. It has been the modern monospace font of choice in Windows since Windows Vista.
- Liberation Mono is the default monospace font in Red Hat Enterprise Linux. It's a metric-compatible replacement for Courier New.
- Noto Sans Mono is the default monospace font in ChromeOS and Fedora 36+.
- DejaVu Sans Mono is a popular choice among Linux distributions. It was the default monospace font in Fedora before v36 and ChromeOS Secure Shell before v73. It's also an inspiration for Menlo.
- Roboto Mono is the default monospace font for Android.
- Source Code Pro is the default monospace font in GNOME.
- Courier New is the web-safe fallback.

I intentionally left out a few system monospace fonts:

- Ubuntu Mono. According to [the user feedback in the StackOverflow design refresh announcement](https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021), Even Ubuntu users don't like it. It's smaller than its sans-serif counterpart, too, which is a notable issue.
- Source Code Pro. It's the default monospace font in GNOME. It's a good UI font, but I doubt it's a good choice for code. It's too wide.

---

As a reference:

GitHub's default:

```text
ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace
```

Tailwind 3.4.13:

```text
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
```

StackExchange's design refresh in 2021:
<https://meta.stackexchange.com/questions/364048/we-are-switching-to-system-fonts-on-may-10-2021>
@haoqunjiang haoqunjiang mentioned this issue Nov 13, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@haoqunjiang @otabekoff