3

VS Code Custom Font without Font Install Privileges

 1 year ago
source link: https://gist.github.com/adamdehaven/10fe04b212dfc28bc7a092a849ccd2e1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
VS Code Custom Font without Font Install Privileges

VS Code Custom Font without Font Install Admin Privileges

  1. Open Help -> Toggle Developer Tools in the menu (Ctrl + Shift + I)

  2. Paste JavaScript code below into the Console and execute.

    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/adamdehaven/FiraCode/master/distr/woff2/FiraCode-Regular.woff2") format("woff2"),
                url("https://raw.githubusercontent.com/adamdehaven/FiraCode/master/distr/woff/FiraCode-Regular.woff") format("woff"),
                url("https://raw.githubusercontent.com/adamdehaven/FiraCode/master/distr/ttf/FiraCode-Regular.ttf") format("truetype"),
                url("https://raw.githubusercontent.com/adamdehaven/FiraCode/master/distr/otf/FiraCode-Regular.otf") format("opentype");
            font-weight: normal;
            font-style: normal;
        }`); 
    styleNode.appendChild(styleText); 
    document.getElementsByTagName('head')[0].appendChild(styleNode);
  3. Ensure 'Fira Code' is the first entry in VS Code Font Family settings: 'Fira Code', Consolas, 'Courier New', monospace

  4. Enable Font Ligatures in settings: "editor.fontLigatures": true

  5. Optional: In the "Sources" tab of the Developer Tools, create a new Snippet with the code above, right-click the created Snippet to execute. This can be preserved even after restarting the application.

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK