Use system-ui as font on Linux

[jhasse]

• VSCode Version: 1.4.0
• OS Version: Ubuntu MATE 16.04

This commit hard-coded the Ubuntu font for the UI: 11a3b51

While this might look more integrated for Ubuntu Unity users, everywhere else (GNOME, KDE, MATE with other setting or another distro, ...) it doesn't. Having sans-serif as an alias which I can change to a font I want is better IMHO.

The best solution probably is to use the same font that menus are using, e. g. the system GUI/Gtk/system font. Is there a way to access this, maybe similar to -apple-system or BlinkMacSystemFont?

[Tyriar]

👍 sans-serif points to the default sans font which is Ubuntu on standard Ubuntu 16.04, so removing Ubuntu will still use that font.

[joaomoreno]

Yeah, but doesn't argument that apply for all operating systems? And isn't our stance on this that we want to own the UI and aesthetics of Code, meaning if we think Ubuntu looks best then we'll pick it, the same way that if we pick Segoe UI since it does look best?

Suddenly this just seems to me to be a duplicate of #3112.

Opinions? @stevencl @bgashler1 @Tyriar @bpasero

[bpasero]

Yes, or to allow the user to change the styling via some setting (font choice, or full CSS access).

[Tyriar]

@joaomoreno yeah but we also own the UI on Windows and Segoe UI is the way Windows is going. Ubuntu may look out of place when not on Ubuntu but the font is still available, such as on its derivatives. Ubuntu is not available on all Linux distributions so why would we care so much as to enforce it on a subset of distros but not care about the rest?

[stevencl]

Our goal is to strike the balance between defining the UI and aesthetics of Code such that Code is easily recognisable on each platform but that it also looks and feels like it belongs on each platform. So we should choose whichever font we think manages that balance best. If we're hearing that the choices we have made don't work well on particular platforms we should reconsider. From the above, if I understand correctly, it sounds like we might want to consider using something different to Ubuntu on a Linux distribution where Ubuntu is not available as the current font we are using does not look appropriate?

If on the other hand this is just about adding a setting that allows the user to change the font then sure, that sounds good if we can do it, but we should stick with our original choices as long as they look appropriate on each platform.

[Tyriar]

Personally I think (like the OP) that it is on the wrong side of the balance by hard coding Ubuntu. If we really wanted to take control and make it consistent on Linux by default we should ship the Ubuntu font with the distributable, otherwise it's only Ubuntu on some distros (Ubuntu derived distros, maybe Debian too?) and not others (Red Hat, Arch Linux, etc.).

Do note that users can specify their default preferred font through the OS, we're essentially ignoring this and saying "Ubuntu is better".

This is just something that will make VS Code feel less native on distros that have Ubuntu but where it is not the default (think forcing Segoe UI on to OS X users).

[joaomoreno]

@Tyriar @bgashler1 Please review 37212c7

[Tyriar]

I tried it out and didn't work exactly as I expected. Since vscode is built on Electron it doesn't actually pull the system fonts but instead uses a default set of fonts designed for the web. So after 37212c7 the explorer is being rendered as Arial.

Old:

New:

I tried changing the default font in Unity Tweak Tool to a monospace font but it didn't work due to Chromium taking control of what fonts it wants to display.

@joaomoreno I think reverting 37212c7 and closing this as will not fix is probably the way to go given this new information.

[brunnopleffken]

I like @bpasero's idea of allowing to override the default UI font the same way we can change the editor font.

[joaomoreno]

Closing this as designed.

@brunnopleffken That falls within the scope of #3112.

[jhasse]

Just found this https://bugs.chromium.org/p/chromium/issues/detail?id=654679 :)

Can system-ui be added to the front of the list as soon as the patch lands in Chromium / Electron?

[Tyriar]

That would be good, it will probably take a while for the change to trickle down to us though.

[ydawei]

I forced my VSCode to change the UI font by modifying /usr/share/code/resources/app/out/vs/workbench/electron-browser/workbench.main.css. Then VSCode told me my installation was corrupt and the title is now appended with [Unsupported]. Anyway this workaround let me get rid of ubuntu font in the main UI.

[David-Else]

I saw this on the insiders changelog https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_46.md . I am using Centos 8 and like exactly how it looks now. I hope the new VS Code version will not change anything and using system-ui will be optional?

[madig]

You probably should be able to set system-ui to whatever you want with fontconfig?

[David-Else]

@madig I definitely don't want to change my system fonts to accommodate breaking changes in VS Code. I am hoping this change will be opt in, fonts on Linux are a nightmare and sudden unwelcome changes with no warning can send innocent programmers down a rabbit hole of tedium!

I would set my fonts using Gnome Tweaks (Centos 8.1):

[jhasse]

system-ui will reflect those changes in Gnome Tweaks (it's the "Interface" font), that's exactly what it's intended for :)

[David-Else]

@jhasse That is good news, but will the next version of VS Code have changed its fonts for me without my permission? That is really the answer I am looking for. Cheers.

[jhasse]

What do you mean by "changed my fonts"? The setting in Gnome Tweaks won't be touched, no, but VS Code will respect it now, while it had a hard-coded font list before (which would result in the "Ubuntu" font being used on most Linux distros).

[David-Else]

@jhasse Sorry, I reworded my comment to be clearer after you replied. I was trying to say VS Code's fonts, I realize it won't touch my system.

This change seems to only be positive if the documentation accompanying it is very clear and explicit. For many people, the VS Code fonts will change and they will have no idea why and they might like it just as it was.

(which would result in the "Ubuntu" font being used on most Linux distros).

The important word being most here, how about everyone else?

• How do I know what font is being used now?
• How do I get it back again without changing my system fonts?

[jhasse]

How do I know what font is being used now?

Check if you have the "Ubuntu" installed. If not, check for "Droid Sans". If not, it's "sans-serif" (you can check what font that is with fc-match sans-serif).

For many people, the VS Code fonts will change and they will have no idea why and they might like it just as it was.

How do you know that it's "many"? For example on every system that has "Ubuntu" as the interface font (i.e. Ubuntu and its spin-offs) or every system where system-ui == "Ubuntu", "Droid Sans", sans-serif (that would be my system for example) nothing changes.

Also keep in mind that if the font does change, it will change to the UI font used every where else in the system! Seems unlikely to me, that a user dislikes a font he already uses every day in most of his apps and his desktop environment.

For any change to the UI there might be some people who liked it the way it was before. That's why every change should be just justified. IMHO this is a change for the better (why hard-code "Ubuntu" as a font on Linux?) and many pro-arguments have been given :)

How do I get it back again without changing my system fonts?

By creating a fontconfig configuration file which sets system-ui to the old font. It's a bit cumbersome until #519 is fixed.

[David-Else]

To summarize: It seems on my Centos system (which will be the same setup for Fedora users) the VS Code UI fonts will change from Droid Sans (which is the perfect match for the default Droid Sans Mono for the code editor) to Cantarell Regular (the default system-ui font).

The only easy way to revert this unwanted change is to change my system 'interface' fonts to Droid Sans and change the entire look of my OS. Have I understood this correctly? If this is correct then I think it should be opt-in, or at least very clearly explained in the release notes.

EDIT: I realize this will be a good update for many people, so I would actually say it should just have an easy way to opt-out if you want to.

[jhasse]

I would frame it differently: While VS Code used "Droid Sans" as its UI font on Linux (or "Ubuntu" if you have that installed. Or, when you have neither "Droid Sans" nor "Ubuntu" installed, your "sans-serif" font, which would be "DejaVu Sans" most of the time. Or "Liberation Sans". Not sure though, you might have to check. Oh btw "Droid Sans" often has fallbacks, they would be used even if you didn't have "Droid Sans" installed. Or if you have a fallback for "Ubuntu", that will be used over "Droid Sans". Did I mention that this logic is independent of your distro-choice and also independent of VS Code's code editor font setting?) it now matches your system's UI font, so the font that even VS Code already uses for the native window titlebar, menus or file dialogs. ;)

Just saw your edit: The easy opt-out way would be #519. You can use the fontconfig trick too though. Or just give Canterell a try, after all: You're already using it :)

[David-Else]

@jhasse This maze of complexity is killing my brain. I will give Canterell a try, and if it looks awful come back to this thread to haunt you :)

[arquolo]

Is there any alias for system monospace font, like system-ui?

[perlun]

I came here because I upgraded my code package and suddenly the font changed. I liked the old font being used by VS Code (1.45.1-1589445302), and I'm not overly pleased with the new font being used (by 1.46.0-1591780013). It even feels like the font size was changed. Using Debian Buster with Cinnamon.

Like others, I wonder: how do I even know what font I used previously? This is what the Font Family looks like at the moment:

'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'

This is the exact same setting on another machine, where I still have 1.45.1 installed. But I guess this is just for the Text Editor, not for the workbench (as implied/mentioned above)?

I agree with the sentiment shared by others. Having to change my desktop settings (I honestly don't even know which one of these it would be) to get the font back in VS Code to the previous one feels the odd way around. I think I lean towards this should not have been merged before #519 was properly resolved.

I will revert back to 1.45.1 until this gets a proper resolution. If someone has a fontconfig that resolves this, I am willing to give it a try as well.

[bpasero]

@kdrag0n can you chime in on #10144 (comment)

[gombosg]

I'm coming here to tell that on my Fedora, VSCode looks much better with Cantarell. Thanks for fixing this and making it consistent! 🙂

[kdrag0n]

@perlun If you have the Ubuntu font installed, it would have been used on the old version. Droid Sans would have been used otherwise. If neither of those were installed, it should've tried to use Arial, which is likely aliased to an open-source metric-compatible font (e.g. Liberation Sans) on Linux.

[David-Else]

Here is the before and after on my Centos 8.1 install, I am using the newer abattis-cantarell-fonts-0.111-2.fc30.noarch.rpm version as they improved them noticeably. What do people think? Are the System-UI fonts definitely subpixel anti-aliased?

1.45.1

1.46

[madig]

Looks subpixel-rendered to me, just like in the 1.45.1 screenshot.

[David-Else]

@madig I thought so, just getting a second opinion. Linux fonts really have taken their toll on me, I started to doubt myself.

[krkhan]

Been waiting for this for ages. So glad to see it finally happen. Not sure though whether vscode is picking up the font from gtk2/gtk3/qt settings (I have went through great pains to make sure everything looks consistent in all toolkits).

[perlun]

@kdrag0n Thanks for the reply. I don't have any Ubuntu font installed as far as I can tell. Droid Sans is installed though.

With 1.45.1

As far as checking what font is actually being used, I realized I could easily check this using the devtools (the goodness of Electron apps, really 🙏) Surprise surprise, it's actually Arial at work here! 😄

I do have the ttf-mscorefonts-installer package installed, so I actually have the real (Microsoft-provided) Arial font available.

With 1.46.0

Bottom line

So, for me VS Code has changed from using Arial (a previous fallback) to use DejaVu Sans (which seems to be what system-ui resolves to on my system).

Inspired by this blog post and the other mentions of fontconfig in this issue, I created a ~/.config/fontconfig/fonts.conf file that looks like this:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>system-ui</family>
    <prefer>
      <family>Arial</family>
    </prefer>
  </alias>
</fontconfig>

This works fine with Firefox; it properly resolves system-ui to Arial on my system. Without the change, it uses DejaVu Serif. (interestingly enough, I don't know why it chooses a serif font by default)

However, both Chrome and VS Code does the wrong thing by not honoring this fontconfig override. They still render DejaVu Sans.

Anyone has any ideas about how to resolve this? Greatly appreciated. And yes, I find Arial a perfect choice for the VS Code menus, thankyouverymuch. 😉

[jhasse]

This works fine with Firefox; it properly resolves system-ui to Arial on my system. Without the change, it uses DejaVu Serif. (interestingly enough, I don't know why it chooses a serif font by default)

system-ui is a Chrome-only extension.

Have you tried changing your system UI font? Your currently selected "Sans Regular" is "DejaVu Sans".

[perlun]

@jhasse Thanks. Changing the "Default font" in my Cinnamon settings does indeed work. But I prefer to keep the old, perhaps slightly "inconsistent" approach with other programs being displayed with DejaVu Sans and VS Code using Arial.

Why doesn't Chrome/Electron honor the fontconfig settings in this case? It seems quite odd, to be honest.