How to Change VSCode Fonts: Default Fonts and Customization Guide

Question

Learn how to change VSCode fonts. Discover default fonts for Windows, macOS, and Linux and customize your editor with our easy guide.

Accepted Answer

VS Code uses Consolas on Windows, Menlo on macOS, and monospace on Linux by default, and you can change the editor font by modifying the editor.fontFamily setting via the Settings UI, settings.json, or programmatically through the VS Code API.

The microsoft/vscode repository defines the editor's typography behavior through a centralized configuration system. Whether you want to enable ligatures with Fira Code or simply increase readability, understanding how VS Code handles fonts helps you customize your environment effectively.

Default VSCode Fonts by Platform

The editor relies on a fallback font stack defined in the source constant EDITOR_FONT_DEFAULTS.fontFamily located in src/vs/editor/common/config/fontInfo.ts. When you do not override the setting, VS Code builds a CSS font-family rule using these platform-specific defaults:

Windows: Consolas (followed by Courier New and generic monospace)
macOS: Menlo (followed by Monaco and generic monospace)
Linux: monospace (system UI font)

The FontInfo class in fontInfo.ts consumes this default when constructing the editor's internal font metrics, which are then applied to the DOM via src/vs/editor/browser/services/monacoEditorService.ts.

How to Change VSCode Fonts

The editor.fontFamily setting is registered in src/vs/editor/common/config/editorOptions.ts and persisted through the workbench's Preferences Service (src/vs/workbench/services/preferences/browser/preferencesService.ts). You can modify this value through three primary methods.

Using the Settings UI

The simplest approach requires no code:

Open File > Preferences > Settings (or press Ctrl+, / Cmd+,).
Search for "Font Family".
Locate Editor: Font Family.
Enter a comma-separated CSS font-family string, such as Fira Code, 'JetBrains Mono', monospace.

Changes apply immediately to all open editor windows.

Editing settings.json Directly

For version-controlled configurations or workspace-specific fonts, edit the JSON file directly:

// User settings: ~/.vscode/settings.json (or %APPDATA%\Code\User\settings.json on Windows)
// Workspace settings: .vscode/settings.json in your project root
{
  "editor.fontFamily": "Fira Code, 'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.fontWeight": "400"
}

The Preferences Service watches this file for changes. When you save, VS Code triggers a configuration change event that flows to FontInfo in fontInfo.ts, causing the editor to recompute font metrics and update the CSS in the DOM without requiring a reload.

Programmatically via Extension API

Extensions can manipulate the font setting through the VS Code API. This is useful for theme extensions or productivity tools that adjust typography based on context:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('myExtension.setCodingFont', async () => {
    const config = vscode.workspace.getConfiguration('editor');
    
    // Update the font family globally
    await config.update(
      'fontFamily',
      'Fira Code, monospace',
      vscode.ConfigurationTarget.Global
    );
    
    vscode.window.showInformationMessage('Editor font updated to Fira Code');
  });

  context.subscriptions.push(disposable);
}

The config.update call persists the value through the same preferencesService.ts pipeline used by the UI, ensuring consistency across all editor instances.

How VSCode Font Settings Work Internally

Understanding the data flow helps troubleshoot issues when fonts fail to load. The system follows this pipeline:

Registration: src/vs/editor/common/config/editorOptions.ts registers editor.fontFamily as a configurable option with the platform-specific default from EDITOR_FONT_DEFAULTS.
Persistence: src/vs/workbench/services/preferences/browser/preferencesService.ts handles reading and writing the value to settings.json, emitting change events when the file is modified.
Computation: src/vs/editor/common/config/fontInfo.ts constructs a FontInfo object. If the user setting exists, it overrides EDITOR_FONT_DEFAULTS.fontFamily; otherwise, the default stack is used.
Rendering: src/vs/editor/browser/services/monacoEditorService.ts applies the FontInfo data to the editor's DOM elements via CSS, injecting the final font-family rule into the stylesheet.

When you change the font, the ConfigurationService triggers an event that flows through steps 3 and 4, updating the editor surface within milliseconds.

Summary

Default fonts: VS Code uses Consolas (Windows), Menlo (macOS), and monospace (Linux) defined in src/vs/editor/common/config/fontInfo.ts.
Primary setting: Control fonts via editor.fontFamily registered in src/vs/editor/common/config/editorOptions.ts.
Three methods: Change fonts through the Settings UI, direct settings.json edits, or the Extension API via vscode.workspace.getConfiguration.
Internal flow: Changes propagate through preferencesService.ts → fontInfo.ts → monacoEditorService.ts without requiring a reload.

Frequently Asked Questions

What is the default font in VS Code?

VS Code uses a platform-specific default defined in the EDITOR_FONT_DEFAULTS.fontFamily constant in src/vs/editor/common/config/fontInfo.ts. On Windows, the default is Consolas; on macOS, it is Menlo; on Linux, it falls back to the system monospace font. These defaults ensure consistent readability across operating systems when no user override is specified.

How do I install and use a custom font like Fira Code in VS Code?

First, install the font onto your operating system by downloading it from the font provider and installing it system-wide. Then, open VS Code Settings (Ctrl+,), search for "Font Family", and edit Editor: Font Family to include the font name, such as Fira Code, monospace. If the font supports ligatures, enable "editor.fontLigatures": true in your settings.json file to combine character sequences into single glyphs.

Why doesn't my font change immediately after editing settings.json?

VS Code watches the settings.json file for changes through the Preferences Service (src/vs/workbench/services/preferences/browser/preferencesService.ts), and updates typically apply within milliseconds. If the font does not change, verify that the font name is spelled exactly as the system recognizes it (including spaces and capitalization), ensure the font is installed at the system level (not just user-level on some OSes), and check for syntax errors in the JSON file that might prevent parsing.

Can I set different fonts for different file types in VS Code?

VS Code does not support language-specific font families through the standard editor.fontFamily setting, which applies globally. However, you can achieve per-language fonts by using extensions that modify the CSS directly or by using workspace-specific settings. For example, you can create a workspace settings file (.vscode/settings.json) in a specific project directory that overrides the global font, so that opening that workspace loads the specified typography while other projects retain the default.