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 :/

wheldrak3 commented Feb 3, 2018

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 :) 👍 ❤️

wheldrak3 commented Feb 27, 2018

Thx, it worked :) 👍 ❤️

@SusanthCom

This comment has been minimized.

Show comment
Hide comment
@SusanthCom

SusanthCom May 25, 2018

@rzvdaniel 👍 Thank you for detailed info ...

SusanthCom commented May 25, 2018

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

l3aconator commented 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;
}
@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

@plasmate

This comment has been minimized.

Show comment
Hide comment
@plasmate

plasmate Aug 16, 2018

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

plasmate commented Aug 16, 2018

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

@techieshark

This comment has been minimized.

Show comment
Hide comment
@techieshark

techieshark Aug 28, 2018

This is great, thanks.

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

techieshark commented Aug 28, 2018

This is great, thanks.

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

@mcdurdin

This comment has been minimized.

Show comment
Hide comment
@mcdurdin

mcdurdin Aug 31, 2018

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.

mcdurdin commented Aug 31, 2018

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.

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