# How to Change VSCode Fonts: Default Fonts and Customization Guide

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

- Repository: [Microsoft/vscode](https://github.com/microsoft/vscode)
- Tags: how-to-guide
- Published: 2026-02-15

---

**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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/editorOptions.ts) and persisted through the workbench's **Preferences Service** ([`src/vs/workbench/services/preferences/browser/preferencesService.ts`](https://github.com/microsoft/vscode/blob/main/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:

1. Open **File > Preferences > Settings** (or press `Ctrl+,` / `Cmd+,`).
2. Search for **"Font Family"**.
3. Locate **Editor: Font Family**.
4. 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:

```json
// 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`](https://github.com/microsoft/vscode/blob/main/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:

```typescript
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`](https://github.com/microsoft/vscode/blob/main/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:

1. **Registration**: [`src/vs/editor/common/config/editorOptions.ts`](https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/editorOptions.ts) registers `editor.fontFamily` as a configurable option with the platform-specific default from `EDITOR_FONT_DEFAULTS`.

2. **Persistence**: [`src/vs/workbench/services/preferences/browser/preferencesService.ts`](https://github.com/microsoft/vscode/blob/main/src/vs/workbench/services/preferences/browser/preferencesService.ts) handles reading and writing the value to [`settings.json`](https://github.com/microsoft/vscode/blob/main/settings.json), emitting change events when the file is modified.

3. **Computation**: [`src/vs/editor/common/config/fontInfo.ts`](https://github.com/microsoft/vscode/blob/main/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.

4. **Rendering**: [`src/vs/editor/browser/services/monacoEditorService.ts`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/fontInfo.ts).
- **Primary setting**: Control fonts via `editor.fontFamily` registered in [`src/vs/editor/common/config/editorOptions.ts`](https://github.com/microsoft/vscode/blob/main/src/vs/editor/common/config/editorOptions.ts).
- **Three methods**: Change fonts through the Settings UI, direct [`settings.json`](https://github.com/microsoft/vscode/blob/main/settings.json) edits, or the Extension API via `vscode.workspace.getConfiguration`.
- **Internal flow**: Changes propagate through [`preferencesService.ts`](https://github.com/microsoft/vscode/blob/main/preferencesService.ts) → [`fontInfo.ts`](https://github.com/microsoft/vscode/blob/main/fontInfo.ts) → [`monacoEditorService.ts`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/settings.json) file for changes through the **Preferences Service** ([`src/vs/workbench/services/preferences/browser/preferencesService.ts`](https://github.com/microsoft/vscode/blob/main/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`](https://github.com/microsoft/vscode/blob/main/.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.