How to use custom font in VS Code(Windows) without admin privilege to install the font?

Question

I don't have Admin privilege on my working PC(Windows 7), so I can't install custom font(Fira Code) into my system. Is there a way to use such font without installing in VS Code?

Answer 1

Find a ugly workaround for this issue: using webfont.

1. Open Help -> Toggle Developer Tools in the menu
2. Paste below js codes and execute in the Console of DevTools to setup 'Fira Code' font face.

var styleNode = document.createElement('style'); 
styleNode.type = "text/css"; 
var styleText = document.createTextNode(`
    @font-face{
        font-family: 'Fira Code';
        src: url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/eot/FiraCode-Regular.eot') format('embedded-opentype'),
             url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff2/FiraCode-Regular.woff2') format('woff2'),
             url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/woff/FiraCode-Regular.woff') format('woff'),
             url('https://raw.githubusercontent.com/tonsky/FiraCode/master/distr/ttf/FiraCode-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }`); 
styleNode.appendChild(styleText); 
document.getElementsByTagName('head')[0].appendChild(styleNode);

3. Make sure 'Fira Code' is the first parameter in the Font Family settings.
4. Enable Font Ligatures settings, otherwise ">=" won't be transferred to "≥"
5. (Optional) in the Sources tab of DevTools, create a new snippet with the codes, and right click the new created file to run. It can be preserved ever after restart the application.

Answer 2

I found a way to do this without having to run the snippet every time you stat up VS Code.

1. Go to File > Open Folder

2. Navigate to your VS Code installation, and then go to:

   resources > app > out > vs > code > electron-browser > workbench Open that folder.

3. Edit workbench.js using VS Code and add the Tai's snippet to the end of it.

4. Save
5. Do Ctrl+R to reload the window and you should be done!

Again, make sure that you have Fira Code as the first option in your Font Family settings within VS Code, and make sure that font ligatures are enabled.

Answer 3

Tai Zhang's great little hack can be automated with the Monkey Patch extension.

After installing Monkey Patch, paste Tai's code into a new file, e.g. %USERPROFILE%\vscode-monkeypatch-modules\custom-fonts.js.

Now add the file to your settings.json, e.g.:-

"monkeyPatch.folderMap": {
    "my-custom-modules" : "~/vscode-monkeypatch-modules",
},
"monkeyPatch.browserModules": [
    "my-custom-modules/custom-fonts"
]