thedobbles
thedobbles

Reputation: 503

How to use custom font in visual studio code

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!

Upvotes: 40

Views: 114622

Answers (5)

Max
Max

Reputation: 11

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
}

Upvotes: 0

Chevas Balloun
Chevas Balloun

Reputation: 455

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.

Upvotes: 4

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23088

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
}

Upvotes: 2

greg
greg

Reputation: 1204

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.

Upvotes: 4

Nacimota
Nacimota

Reputation: 23265

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.

Upvotes: 51

Related Questions