How to use custom font in visual studio code

Question

This isn't so much a coding question as it is about the visual studio code editor. What I want to do is use source code pro in the editor, but I don't know what to change the font setting to. Thanks!

Proxy

Answer 1

First install the font on your machine if necessary. Then, in your user settings JSON file (File > Preferences > User Settings), override editor.fontFamily like so:

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Source Code Pro"
}

You may need to restart VSCode if it was already open when the font was first installed.

Knop

Random FYI, but if you're using one of the cool new fonts like JetBrains Mono, make sure you add to use the Ligatures otherwise you won't get the cool -> & => font effects."editor.fontLigatures": true, – Blackman

For those who are getting a bit frustrated, restarting VSCode as this answer says worked for me. Thanks! – Palenque

Answer 2

As a follow up to Nacimota's answer, to install custom fonts (using Windows 10 the following example) go through the tutorial here.

For me it was a matter of searching for "fonts" from my task bar then clicking the top result. From there I dragged all the files in the "target/TTF" directory, that is generated from following the Source Code Pro tutorial.

Roderica

Answer 3

This is tested in VSCode 1.30.2 in Windows:

1. Ensure the font is available. In Windows, ttf fonts can be installed via right click font file -> Install (requires elevation).
2. Ctrl+, => Settings => type font-family
3. Choose User Settings and Workspace Settings

4. Go to Text Editor => Font Family => Change value (font family names with a blank might require single quotes). Example:

   'Fira Code', Consolas, 'Courier New', monospace
   

5. Enable font ligatures (if needed)

6. A VSCode restart might be required in order to see the new font applied

Note: after step 1, you can also press Open Settings (top-right corner) to edit directly the json settings. Example:

{
    "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true
}

Eyestrain

Answer 4

I had to install the font "for all users" or VSCode would not recognize it. Total shot in the dark, but that's what fixed it for me.

Bainbridge

Answer 5

After you've installed the font as mentioned by others, go into Settings and edit the font in JSON, you can then see the option to edit the font for the terminal as well as the editor. Don't forget to add quotes in the name of the font if it has a space in the name.

Mine looks like this

{
    "workbench.colorTheme": "GitHub Dark Dimmed",
    "workbench.iconTheme": "material-icon-theme",
    "editor.formatOnSave": true,
    "explorer.confirmDelete": false,
    "go.toolsManagement.autoUpdate": true,
    "git.autofetch": true,
    "redhat.telemetry.enabled": false,
    },
    "workbench.startupEditor": "none",
    "terminal.integrated.fontFamily": "'Source Code Pro for Powerline'",
    "window.zoomLevel": -1,
    "files.autoSave": "afterDelay",
    "editor.fontFamily": "'Source Code Pro Semibold for Powerline', 'Source Code Pro for Powerline', Menlo, Monaco, 'Courier New', monospace",
    "editor.formatOnPaste": true
}

Tia