Vscode: [theming] Allow theming workbench fonts

[be5invis]

Including

• Family
• Weight
• Style/Variant/Features
• Include typeface files in theme pack
• Per-language settings (to support fallbacks, cf. #5260)

[pahen]

I would love this! This is how the Ayu theme could look like if we had this feature.

[guidobouman]

Also see this similar issue about allowing the setting of a custom font on non-editor parts of the app: https://github.com/Microsoft/vscode/issues/519

[leonbreedt]

This is probably my biggest annoyance switching from Atom, that I have to live with the standard font.

EDIT: "Fixed" by hacking /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css, and dismissing "corrupt" warning, but a feature would be preferable...

[johnpapa]

Adding these as per @aeschli and @chrisdias

These are not all about the fonts. some are letter spacing, font-style, color, too.

Font settings for the VS Code Shell

The font-family for the shell itself, so we can change the title bar, sidebar, status bar, file tabs, and more. This would be the default for the shell and help match the code.

.monaco-shell {
  font-family: 'Operator Mono', 'Fira code', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

Panel headers

Expose the color, font settings and letter spacing for the panel header titles. Letter spacing is sometimes needed as the titles' letters are very close and more difficult to read in some fonts.

.vs-dark .monaco-panel-view .panel > .panel-header > .title {
  font-weight: normal;
  letter-spacing: 1px;
}

Window titles

Expose color, font settings, and letter spacing for window titles

.vs-dark .monaco-workbench > .part.titlebar > .window-title {
  color: #fafafa;
  letter-spacing: 1px;
  font-weight: 200;
}

File Tabs

Expose color, font settings, and letter spacing for tabs (file tabs)

.monaco-workbench .tabs-container .tab * {
  font-style: italic;
}

[johnpapa]

@aeschli Can you provide some feedback on which of these may be within your roadmap?

[RomainLanz]

Any news on this?

[niteshkumarniranjan]

Starting to hate vscode on ubuntu because I dont like the ubuntu font in the UI.

[ryaninvents]

I'm in the camp of people who would like to use an alternate UI font on Ubuntu. Here's how I managed to do it.

I downloaded a copy of my font of choice -- Lato -- and used FontForge to rename it to "Ubuntu". (I'd wanted to name it "BlinkMacSystemFont" so it wouldn't collide, but VS Code applies OS-specific font settings, so that wasn't possible.) I updated Regular, Italic, Bold, and Bold Italic, then copied the new font files to ~/.fonts and ran fc-cache -f -v to reload the font cache.

It would be nice if there were an unused font name at the start of the font-family declaration, such as LinuxSystemUI, so we wouldn't have to "clobber" the Ubuntu font. However, I'm happy with my setup now.

[wsdfhjxc]

You don't have to mess with system fonts, since there is an extension called Custom CSS and JS Loader, which allows you to theme VSCode in a similar way to Firefox with userChrome.css.

The rule to change the UI font would be like:

body {
  font-family: "Roboto" !important;
  font-size: 9.5pt !important;
}

[be5invis]

@wsdfhjxc However we _want_ an official way to do this, so theme authors can fully implement their design.

[jonbp]

Starting to hate vscode on ubuntu because I dont like the ubuntu font in the UI.

I thought i was the only one.. My whole system is Roboto except VS Code

[mikelpr]

another workaround is to add the following to ~/.config/fontconfig/fonts.xml

<?xml version='1.0'?> <!DOCTYPE fontconfig SYSTEM 'fonts.dtd'> <fontconfig> ... (snip or maybe nothing) <match> <test name="family" qual="any"> <string>Ubuntu</string> </test> <edit binding="same" name="family" mode="assign"> <string>Roboto</string> </edit> </match> ... </fontconfig>

[camilopedroso]

Adding these as per @aeschli and @chrisdias

These are not all about the fonts. some are letter spacing, font-style, color, too.

Font settings for the VS Code Shell

The font-family for the shell itself, so we can change the title bar, sidebar, status bar, file tabs, and more. This would be the default for the shell and help match the code.

.monaco-shell {
  font-family: 'Operator Mono', 'Fira code', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

Panel headers

Expose the color, font settings and letter spacing for the panel header titles. Letter spacing is sometimes needed as the titles' letters are very close and more difficult to read in some fonts.

.vs-dark .monaco-panel-view .panel > .panel-header > .title {
  font-weight: normal;
  letter-spacing: 1px;
}

Window titles

Expose color, font settings, and letter spacing for window titles

.vs-dark .monaco-workbench > .part.titlebar > .window-title {
  color: #fafafa;
  letter-spacing: 1px;
  font-weight: 200;
}

File Tabs

Expose color, font settings, and letter spacing for tabs (file tabs)

.monaco-workbench .tabs-container .tab * {
  font-style: italic;
}

Hi @johnpapa!
Is there a solution for PC? I tried your recipe, but, It's not working!
Thanks in advance!