Customizing VS Code for Two Fonts.

customizing-vs-code.md

Customizing VS Code

I followed the instructions in this blog post Multiple Fonts: Alternative to Operator Mono in VSCode, but did not see any changes made to VS Code. After digging a bit, I discovered that all the CSS class names had changed. They’re now e.g. .mtk13, .mtk16 { … }.

Gotchas

• Ensure it’s a file URL e.g. { "vscode_custom_css.imports": [ "file:///Users/Brian/Desktop/vscode-style.css" ] }
• If you move the location of your file and update your user settings with the new location, you will need to disable and enable custom CSS cmd+shift+p.
• Also, anytime you change the style in your custom CSS file, you need to disable, then re-enable the extension.

For reference

• vscode-styles for operator mono, fira code ligatures, and oceanic next italic · GitHub
• Not working in VS Code 1.9.0 · Issue #8 · be5invis/vscode-custom-css · GitHub
• Not compatible with VS code version 1.10.2 · Issue #9 · be5invis/vscode-custom-css · GitHub

settings.json

// Add these to your VS Code settings.json
  "editor.fontFamily": "'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "vscode_custom_css.imports": [
    "file:///path/to/your/styles/styles.css" // styles.css in this gist.
  ],

styles.css

/*
 I decided on the Brush Script MT cursive font for now. Works better for me than FlottFlott.
*/
    .mtk3,
    .mtk13,
    .mtk16 {
      margin-left: 1px;
      font-family: "Brush Script MT";
      font-size: 1.6em;
    }

    .mtk4 {
      font-family: "Brush Script MT";
      font-size: 1.4em;
    }

    /*
      For the tab titles.
    */
    .monaco-icon-label-description-container .label-name {
      font-family: "Brush Script MT";
      font-size: 1.3
      em;
    }

    .tabs-container .monaco-icon-label-description-container .label-name,
    .sidebar .monaco-icon-label-description-container .label-name,
    .quick-open-row .monaco-icon-label-description-container .label-name {
      font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
      font-size: 1em;
    }

it didn't work :/

Hello wheldrak3,

How I made it work :)

Update: I wrote a Medium article about how to fix the issues: "Customize Visual Studio Code for Multiple Fonts and styles."
https://medium.com/@rzvdaniel_71068/customize-visual-studio-code-for-multiple-fonts-and-styles-96f83562af58

1. Install vscode-custom-css extension
   https://github.com/be5invis/vscode-custom-css/blob/master/README.md
   Without it, the statement "vscode_custom_css.imports" is not recognized as a valid one inside user settings (settings.json)

2. Make sure vscode-custom-css is enabled after installation
   Do this: CTRL + SHIFT + P and then type "Enable Custom CSS and JS" as documented on their official page above.

3. Make sure you have the font (Brush Script MT)

4. make sure the path to the custom CSS is like this (for Windows version):
   "vscode_custom_css.imports": ["file://C:/Users/daniel/Desktop/styles.css"]

5. Restart VS Code.

6. You'll notice that the comments inside Javascript files are now rendered using Brush Script MT font, but some other keywords aren't. This is caused by the constant change in style names for VS Code, as the author of the gist also noted. To fix this, do the following:

• Navigate to Help -> Toggle Developer Tools in VS Code.
• Use Select Inspector to highlight the keywords you wish to render using the new font and see what is their style (same as you inspect your elements in Chrome).
• Add your new style names in the custom styles.css.
  For example, I had to add .mtk7 to make "import" statements be rendered with the new font.

    .mtk7,
    .mtk3,
    .mtk13,
    .mtk16 {
        margin-left: 1px;
        font-family: "Brush Script MT";
        font-size: 1.6em;
    }

I hope it helps,
Razvan

Thx, it worked :) 👍 ❤️

@rzvdaniel 👍 Thank you for detailed info ...

If you want to keep scoped to just javascript, add [data-mode-id="javascript"] before the selector

[data-mode-id="javascript"] .mtk5 {
  margin-left: 1px;
  font-family: "flottflott";
  font-size: 1.6em;
}

I'm not sure why, but the cursive font is overwriting my code ligatures from FiraFont. I think one of the classnames is the issue

Thank you very much guys, now my VSC looks like my lovely Atom design config!

This is great, thanks.

Might also be of interest to folks here: https://github.com/kencrocken/FiraCodeiScript

In order for cursor tracking to work when you change fonts via CSS rules, you'll want to set editor.disableMonospaceOptimizations: true in your settings.json file.

Hello wheldrak3,

How I made it work :)

Update: I wrote a Medium article about how to fix the issues: "Customize Visual Studio Code for Multiple Fonts and styles."
https://medium.com/@rzvdaniel_71068/customize-visual-studio-code-for-multiple-fonts-and-styles-96f83562af58

1. Install vscode-custom-css extension
   https://github.com/be5invis/vscode-custom-css/blob/master/README.md
   Without it, the statement "vscode_custom_css.imports" is not recognized as a valid one inside user settings (settings.json)
2. Make sure vscode-custom-css is enabled after installation
   Do this: CTRL + SHIFT + P and then type "Enable Custom CSS and JS" as documented on their official page above.
3. Make sure you have the font (Brush Script MT)
4. make sure the path to the custom CSS is like this (for Windows version):
   "vscode_custom_css.imports": ["file://C:/Users/daniel/Desktop/styles.css"]
5. Restart VS Code.
6. You'll notice that the comments inside Javascript files are now rendered using Brush Script MT font, but some other keywords aren't. This is caused by the constant change in style names for VS Code, as the author of the gist also noted. To fix this, do the following:

• Navigate to Help -> Toggle Developer Tools in VS Code.

• Use Select Inspector to highlight the keywords you wish to render using the new font and see what is their style (same as you inspect your elements in Chrome).

• Add your new style names in the custom styles.css.
  For example, I had to add .mtk7 to make "import" statements be rendered with the new font.

  .mtk7,
  .mtk3,
  .mtk13,
  .mtk16 {
  margin-left: 1px;
  font-family: "Brush Script MT";
  font-size: 1.6em;
  }
  I hope it helps,
  Razvan

Thanks a ton dude, looks amazing now!!

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools....
Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

It's not working for me I am ubuntu 20.04 and my version of VScode is 1.47.3. How to make it work?

Solved: For what it's worth, extension never worked for me....However, while i was in there...if you go to the help menu, toggle the Developer Tools.... Check the network tab > you will see there is one css file that vscode loads up.

file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/workbench.desktop.main.css

I went into this file and directly edited the css directly...

since i already had a css file that i intended to use with this extension...

@import url("file:///Users/myaccountfolder/someGoodLocationFolder/.vscode/vs-code-styles.css");

Reload & Problem solved.

For example, i love my font but all i wanted was the tag to be with a different font-family then the attributes. After some trial and error, this did it. Mileage may very depending on whether or not vscode is changing these classes all the time.

span:not(.mtk1) + .mtki, span:not(.mtk1) + .mtk6{
    font-family: 'Courier New' !important;
}

Could you please explain to me the relationship between styles.css and mtk? every time that I change my theme stlyes.css does not work properly and each .mtk in each theme refers to a specific part of the codes, I'm confused about how to write styles.css that works with each theme, and after all I just want wot change the font for keywords but in includes operators(+=><) that I do not want to