Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Customizing VS Code for Two Fonts.

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

// 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.
],
/*
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;
}
@wheldrak3

This comment has been minimized.

Show comment Hide comment
@wheldrak3

wheldrak3 Feb 3, 2018

it didn't work :/

it didn't work :/

@rzvdaniel

This comment has been minimized.

Show comment Hide comment
@rzvdaniel

rzvdaniel Feb 9, 2018

Hello wheldrak3,

How I made it work :)

  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

rzvdaniel commented Feb 9, 2018

Hello wheldrak3,

How I made it work :)

  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

@wheldrak3

This comment has been minimized.

Show comment Hide comment
@wheldrak3

wheldrak3 Feb 27, 2018

Thx, it worked :) 👍 ❤️

Thx, it worked :) 👍 ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment