Create a gist now

Instantly share code, notes, and snippets.

Embed
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 :)

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

rzvdaniel commented Feb 9, 2018

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

@wheldrak3

This comment has been minimized.

Show comment
Hide comment
@wheldrak3

wheldrak3 Feb 27, 2018

Thx, it worked :) 👍 ❤️

Thx, it worked :) 👍 ❤️

@SusanthCom

This comment has been minimized.

Show comment
Hide comment
@SusanthCom

SusanthCom May 25, 2018

@rzvdaniel 👍 Thank you for detailed info ...

@rzvdaniel 👍 Thank you for detailed info ...

@l3aconator

This comment has been minimized.

Show comment
Hide comment
@l3aconator

l3aconator May 30, 2018

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;
}

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;
}
@bcbane

This comment has been minimized.

Show comment
Hide comment
@bcbane

bcbane Jul 30, 2018

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

bcbane commented Jul 30, 2018

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

@mr-uli

This comment has been minimized.

Show comment
Hide comment
@mr-uli

mr-uli Aug 16, 2018

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

mr-uli commented Aug 16, 2018

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

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