Custom fonts for vs code!

custom-vs-code-fonts.md

Download font

https://www.dafontfree.net/freefonts-script12-bt-f141942.htm

Install package

https://github.com/be5invis/vscode-custom-css

Create new css file

sudo nano ~/.vscode/vs-code-styles.css

Copy CSS

/* Set italics and comments to the script font */
.mtk3, .mtk4 {
    font-family: 'Script12 BT';
    font-size: 1.2em;
    font-style: normal;
    color: #57a649!important;
}
.comment {
  font-family: 'Script12 BT';
  font-style: italic;
  font-size: 1.2em;
  color: #57a649!important;
}
.comment:not(.punctuation) {
    font-family: 'Script12 BT';
    font-size: 1.5em;
    color: #57a649!important;
}

Code > Preferences > User Settings

// Somewhere in your user / workspace settings file !

.
.
.
.

"vscode_custom_css.imports": ["file:///<PATH TO CSS FILE>/.vscode/vs-code-styles.css"],
"vscode_custom_css.policy": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

You might have to do a manual reload after setting this up: [View » Command Palette » "Reload Custom CSS and JS"] (which is⌘⇧P on Mac)

This is my CSS:

/* italic styles (comments) will have a different font-family applied (Operator Mono) */
.mtki {
  font-family: "Operator Mono";
  font-style: italic;
  font-weight: 300;
}

Please note the warning after running the reload:

Custom CSS and JS enabled. Restart to take effect. If Code complains about it is corrupted, CLICK DON'T SHOW AGAIN. See README for more detail.

mtki

thank you so much Ronald :P

I dunno, I tried this and there wasn't any change to my comment font, only the style. I'm not sure if it matters where the css file resides, I have it on my desktop just to see if this works and I have my json correctly pointing to it ( ["file:///Users/rich/Desktop/styles.css"] ) - but no change to the font.

@born2fly this post was some time ago now and you likely got it sorted but just looking at your stylesheet URL it seems you are missing the drive letter. Try "vscode_custom_css.imports": ["file:///C:/Users/rich/Desktop/styles.css"],, providing that your filename is styles.css and not vs-code-styles.css as mentioned in this ticket. Test it out by pasting it into your browser and if you get a result it's correct. Then do a "Reload Custom CSS and JS" as mentioned above.