[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. Use proper font family for East Asian languages (CJK) #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: #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?

[niranjannitesh]

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.

[ghost]

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!

[lambdakris]

This sounds related to this older issue #519

[AlexWayfer]

This sounds related to this older issue #519

If not a duplicate.

[mitsukuri]

This sounds related to this older issue #519

If not a duplicate.

With about 2000 upvotes more and 8 years older...

[m417z]

I'd like to offer a solution for Windows which might be preferable for some users due to its simplicity of usage, and might seem like an overkill for others since it requires running a (lightweight) program in the background.

The solution boils down to injecting extra CSS code to VSCode, similarly to what Monkey Patch does, but this method is different and has pros and cons.

Pros:

• No VSCode files are modified on disc, so there's no risk for a permanent damage.
• Works seamlessly, no need to do anything after each VSCode update.

Cons:

• Requires running a (lightweight) program in the background.

Steps:

• Download and install Windhawk.
• Install the VSCode Tweaker mod.
• Configure the desired CSS in the settings.

See the example screenshot below.

Disclaimer: I'm the author of Windhawk.

[heartacker]

I'd like to offer a solution for Windows which might be preferable for some users due to its simplicity of usage, and might seem like an overkill for others since it requires running a (lightweight) program in the background.

The solution boils down to injecting extra CSS code to VSCode, similarly to what Monkey Patch does, but this method is different and has pros and cons.

Pros:

• No VSCode files are modified on disc, so there's no risk for a permanent damage.
• Works seamlessly, no need to do anything after each VSCode update.

Cons:

• Requires running a (lightweight) program in the background.

Steps:

• Download and install Windhawk.
• Install the VSCode Tweaker mod.
• Configure the desired CSS in the settings.

See the example screenshot below.

Disclaimer: I'm the author of Windhawk.

thank, It works, and could you please do not hide the command center ,Thanks

[m417z]

thank, It works, and could you please do not hide the command center ,Thanks

It's hidden because of the sample JavaScript code which shows a message on the titlebar. Just remove it in the mod's settings.