Microsoft said in May 2025 that Visual Studio and VS Code combined had crossed 50 million monthly active developers. That number covers the whole Visual Studio family, not VS Code by itself, but it still says something about how many people touch this editor every month. Most of them never bother changing the font. They open the app, see Consolas or Menlo, and just live with it.
Nothing wrong with the default exactly. It’s just a starting point Microsoft picked for you, and changing it takes maybe a minute once you know which setting to touch. The problem shows up over time: squint at a cramped or low-contrast font for eight hours a day and bugs get harder to spot, eyes get tired faster than they should.
One property controls all of it, editor.fontFamily, sitting a couple clicks deep in Settings. Type the syntax wrong and nothing happens, no error message, no warning, the change just doesn’t take. Get it right and every file you open finally looks the way you wanted.
What Is the VS Code Font Setting
Change one line in Settings and every character in the editor pane redraws in a new typeface. That line is editor.fontFamily, the property responsible for font rendering inside VS Code’s code editor specifically, not the whole app, just the editor surface itself.
Instead of shipping one universal font for everybody, Microsoft ties the default to whatever platform you’re running.
If you’re still fuzzy on what VS Code actually is, that matters here. It’s a lightweight, extensible editor, not a full IDE, and the way it handles fonts reflects that lightweight approach. No font manager built in, no font marketplace, just a property that points at whatever’s already installed on your machine.
| Operating System | Default Font | Fallback Stack |
|---|---|---|
| Windows | Consolas | Courier New, monospace |
| macOS | Menlo | Monaco, Courier New, monospace |
| Linux | Droid Sans Mono | Courier New, monospace |
This split isn’t a documentation guess either. VS Code’s own source code hard-codes those platform fallback fonts directly into the editor’s configuration files, rather than pulling them from some separate settings default. Type “editor.fontFamily” into Settings and watch the autocomplete: it suggests your platform’s exact default stack, pulled straight from that hard-coded list.
Scale matters too. Stack Overflow’s 2025 Developer Survey put VS Code usage at 75.9% of respondents, the most-used code editor for the fourth year running, up from 73.6% in the 2024 survey. That’s not a niche audience squinting at a bad font. That’s most of the industry.
Where VS Code Font Settings Are Stored
Font preferences actually live in two places, the graphical Settings UI and the underlying settings.json file sitting underneath it. Both touch the exact same data. The UI just wraps a friendlier layer around JSON you could edit by hand anyway.
Getting to either one takes about the same effort. Open Settings through File > Preferences > Settings, or hit Ctrl+, on Windows and Linux (Cmd+, on macOS) for the graphical version. Prefer raw JSON instead? Open the Command Palette, type “Preferences: Open Settings (JSON),” and press enter.
Each OS keeps that file in a different folder, and VS Code’s settings system treats user settings and workspace settings as two separate, stackable layers on top of each other.
| Platform | User settings.json Path |
|---|---|
| Windows | %APPDATA%\Code\User\settings.json |
| macOS | ~/Library/Application Support/Code/User/settings.json |
| Linux | ~/.config/Code/User/settings.json |
Workspace-level settings sit in a separate .vscode/settings.json file at the project root instead. That file overrides user settings for anyone who opens the folder, font included.
How to Change the Font Using the Settings UI
Hit Ctrl+, (Cmd+, on macOS) to pull up Settings, then search “font family.” The Editor: Font Family field shows up near the top, already filled in with whatever default your platform assigned.
Type over it. That’s really it, no restart, no reload, VS Code repaints every open file the moment you finish typing.
Underneath, a configuration watcher is doing the work. It listens for saved changes to settings.json and redraws open editors the instant something updates, which is why the change feels instant instead of requiring a relaunch.
Adjusting Font Size From the Same Panel
Font size lives right below Font Family in that same search list, the Editor: Font Size field. Default sits at 14 pixels, though most people end up somewhere between 12 and 18 once they’ve accounted for their monitor and their own eyesight.
Nothing special happens when you change it here versus editing settings.json by hand. Same setting, same result, just a text box instead of raw JSON.
How to Change the Font Using settings.json
Teams sharing a config across machines usually skip the UI and go straight to settings.json. It’s more precise, and it’s the version you can actually commit to a repo.
The property itself is a plain JSON key-value pair: "editor.fontFamily": "Fira Code, Consolas, monospace".
Not sure where the file lives or how to get to it fast? You can open settings.json straight from the Command Palette instead of hunting through menus.
| Method | Best For | Shareable |
|---|---|---|
| Settings UI | Quick, one-off changes | No |
| settings.json | Version-controlled, team setups | Yes, via dotfiles or repo |
One missing comma, one stray quote mark, and the whole file breaks. Every setting listed after that error point quietly reverts to default, with nothing in the UI telling you why.
How to Write a Correct Font Family String
The syntax follows the same font-stack rules CSS has used for years: a comma-separated list, read left to right, first match wins.
A few things trip people up. Font names with spaces in them, ‘Cascadia Code’ for instance, need single quotes wrapped around the whole name so VS Code reads it as one entry instead of splitting it apart. The list itself works as a fallback chain, so if the first font isn’t installed on your machine, VS Code just moves to the next name and tries that one. And ending the chain with the generic keyword monospace keeps things from breaking completely even if every named font fails to load.
Put together, that looks like: "editor.fontFamily": "'Cascadia Code', Consolas, monospace".
Forgetting the quotes around a multi-word name is probably the most common mistake in this whole process, and it fails the same way everything else here fails: silently. No error, no popup, the font just doesn’t take.
How to Change Font Size and Line Height
editor.fontSize defaults to 14. editor.lineHeight defaults to 0, which just tells VS Code to work out spacing on its own based on whatever the font size is. Set lineHeight to a fixed number instead, 22 or 24 for example, and you override that automatic math, giving lines more room to breathe.
Worth separating two settings people confuse constantly. editor.fontSize only touches the code editor’s text. Ctrl+Scroll, or Cmd+Scroll on macOS, zooms the entire interface instead, sidebar and menus and everything else along with it. If you’ve ever accidentally zoomed the whole window trying to just make code bigger, you already know this one the hard way. Zoom resets separately too, with Ctrl+0, and the zoom controls in VS Code run completely independent of the font size property.
One thing that trips people up: bumping font size without touching line height. The characters get bigger but the spacing between lines stays put, so text ends up looking more cramped than before, not less.
How to Enable Font Ligatures
Ligatures merge character sequences like => or !== into a single connected glyph, which makes scanning code visually faster once your eyes get used to it. Turn them on with "editor.fontLigatures": true in settings.json, or flip Editor: Font Ligatures on inside the Settings UI if you’d rather avoid raw JSON.
Here’s the catch nobody warns you about: ligatures only render if the font you picked was actually built with ligature glyphs in the first place. Select Consolas and flip that setting on all you want. Nothing changes, because Consolas was never designed with ligatures baked in.
A handful of fonts were. Fira Code is free, community-maintained, and its GitHub repository shows more than 81,000 stars at this point. JetBrains Mono ships bundled with every JetBrains IDE, and JetBrains’s own documentation counts more than 138 built-in ligatures. Cascadia Code, Microsoft’s own font developed alongside Windows Terminal, is released under the SIL Open Font License and covers the same ground.
For anyone who wants finer control, you can pass a specific OpenType feature string instead of a plain true or false, targeting individual stylistic sets like “calt” or “ss01” one at a time rather than switching every ligature on together.
How to Change the Terminal Font
The integrated terminal runs on its own settings entirely, terminal.integrated.fontFamily and terminal.integrated.fontSize, completely separate from editor.fontFamily. A closer look at VS Code’s terminal settings confirms the panel never inherits anything from the editor automatically, no matter how much you’d expect it to.
This is exactly why people get confused. Change editor.fontFamily and the terminal panel doesn’t move at all, it just keeps whatever font it already had until you set terminal.integrated.fontFamily explicitly yourself. And if you’re using a Powerline-patched font, the name needs to end in “for Powerline” specifically, or the extra glyphs won’t render, according to VS Code’s own terminal documentation.
Nerd Fonts fix most of the icon gaps people run into here. The project’s GitHub repository lists more than 3,600 icons spread across 50-plus patched font families. That’s the whole reason prompt tools like Oh My Posh and Starship insist on a Nerd Font variant specifically. Without one, segment separators and Git status glyphs just show up as blank boxes instead of actual icons.
How to Set a Different Font per Language
Microsoft’s own settings documentation is pretty direct about this one: language-specific settings always override non-language-specific settings, no matter the scope they’re set at. To use that, wrap the setting in square brackets with the language identifier, something like “[markdown]”, then nest editor.fontFamily inside it.
The most common reason people bother with this is readability. A serif or variable-width font for Markdown and plaintext, monospace kept everywhere else for actual code. Simple enough in theory.
Where it goes wrong is the identifier itself. Those are case-sensitive and have to match VS Code’s internal IDs exactly, markdown, python, typescript, whatever the case. Get the ID wrong and the whole block gets silently ignored, no error, no warning, the setting just quietly never applies and you’re left wondering why nothing changed.
How to Install a Custom Font for VS Code
VS Code doesn’t ship with extra fonts bundled in. The operating system needs to already know the font exists before the editor can even offer it as an option, which means the install step happens outside VS Code entirely.
Download the font files first (Cascadia Code’s own GitHub releases page is a decent example of a source you can trust), then hand them off to whatever font manager your OS uses.
| OS | Install Method |
|---|---|
| Windows | Right-click the file, Install for all users |
| macOS | Double-click, open in Font Book, Install Font |
| Linux | Copy to ~/.local/share/fonts, run fc-cache -f -v |
Reload VS Code once you’ve installed the font. The font list only gets read at startup, so anything installed mid-session just won’t show up in the dropdown until you reload the window.
Windows Terminal actually does this step for you, worth knowing as a reference point. Microsoft ships both Cascadia Code and Cascadia Mono inside the Windows Terminal package and sets Cascadia Mono as the bundled default, meaning the install happens automatically there instead of by hand.
Which Fonts Work Well in VS Code
Most developers end up picking between the same handful of fonts, and the real differences come down to ligature support, license, and design intent rather than any one being objectively sharper than the rest.
JetBrains Mono bumps up the lowercase x-height on purpose, a design decision meant to help legibility at small sizes. That came out of its 2020 release, built by Philipp Nurullin and Konstantin Bulenkov at JetBrains.
Cascadia Code has a different backstory. Aaron Bell designed it under commission from Microsoft, and it first shipped September 18, 2019, developed alongside the Windows Terminal project rather than as a standalone release.
Then there’s Source Code Pro, Adobe’s entry into this space. It supports 73 languages under the Adobe Latin 4 glyph set, though it skips ligatures completely, none built in at all.
Comparison Table of Font, Ligatures, License, and Best Use Case
| Font | Ligatures | License | Best Use Case |
|---|---|---|---|
| Fira Code | Yes | SIL OFL 1.1 | General-purpose coding |
| JetBrains Mono | Yes | SIL OFL 1.1 | Long coding sessions |
| Cascadia Code | Yes | SIL OFL 1.1 | Windows Terminal pairing |
| Source Code Pro | No | SIL OFL 1.1 | Broad language coverage |
Why the Font Doesn’t Change After Editing Settings
Font changes fail silently way more often than they throw an actual error you could act on. Usually it comes down to one of a small handful of things.
The font might not be installed at the OS level, in which case VS Code just quietly falls back to whatever’s next in the stack without telling you. There’s a typo in the font name somewhere, capitalization included, since that mismatch counts too. The quotes are missing around a multi-word font name. Or there’s a JSON syntax error somewhere else entirely in settings.json, which blocks the whole file from loading, font setting included.
Microsoft’s own issue tracker has documented cases where a multi-font fallback chain skipped an entry entirely and jumped straight to a later name in the list, with absolutely nothing shown to the user explaining why it happened.
Once you’ve fixed the file, run “Developer: Reload Window” from the Command Palette. Settings.json errors don’t always trigger a reload automatically just because you hit save.
When Font Settings Do Not Apply
Sometimes a perfectly correct font setting just won’t render, and it has nothing to do with syntax at all.
Workspace settings.json can override your personal user settings.json for that one project, no matter what’s set globally in your own preferences. Remote environments complicate things further too, SSH, WSL, GitHub Codespaces, each one storing its own separate settings.json on the remote side entirely, disconnected from whatever’s on your local machine. The minimap is its own animal as well, rendering miniature text completely independent of editor.fontFamily. And theme or icon-pack extensions can change how typography looks on screen without ever touching the actual font property underneath.
Microsoft’s official documentation for connecting to a remote host over SSH confirms remote settings override local user settings for that specific connection, and workspace settings then override both remote and user settings on top of that.
That layered order is exactly why a font that looks right locally can quietly revert the second the same folder opens in GitHub Codespaces or inside WSL. Somewhere further up the override chain, a different settings.json is winning.
FAQ on How To Change The Font In Vscode
Can I use Google Fonts or other web fonts in VS Code?
Yes, though it has to be installed locally first, VS Code reads fonts off your operating system, not the web. Download the file from Google Fonts, install it through Font Book, Windows Fonts, or fontconfig depending on your OS, then reference the name in editor.fontFamily like any other font.
What’s the best font size for coding in VS Code?
There’s no universal answer here. Most developers settle somewhere between 12 and 18 pixels, depending on monitor resolution and their own eyesight. DPI scaling and how far you sit from the screen actually change what feels comfortable more than the raw pixel number ever does.
Can VS Code font settings sync across multiple devices?
Yes, Microsoft’s built-in Settings Sync handles that, sharing settings.json, keybindings, and extensions across machines through a GitHub or Microsoft account. There’s a catch worth knowing about though: sync editor.fontFamily to a machine that doesn’t have that font installed, and it falls back silently to a generic serif font instead of warning you.
Does changing the font affect VS Code’s performance?
Barely at all. Font rendering runs through the same GPU-accelerated text layer no matter which typeface you pick, so swapping Consolas for Fira Code or JetBrains Mono won’t add any lag you’d actually notice. A few OpenType features might tack on a couple milliseconds at startup, but that’s about it.
Can I change the font used in VS Code’s sidebar and menus?
Not officially, no. editor.fontFamily only reaches the code editor itself. Changing the sidebar, tabs, or menu font means editing VS Code’s internal CSS files by hand, or installing a community extension like Apc Customize UI++, which shows an “Unsupported” warning every time you start the app.
How do I reset the font back to the VS Code default?
Right-click the Editor: Font Family field in Settings and pick “Reset Setting,” or just delete the editor.fontFamily line from settings.json yourself. Either way removes your override and lets VS Code fall back to its platform default automatically, no reload needed.
Why don’t ligatures show even though the correct font is set?
Because editor.fontLigatures still defaults to false. Picking the right font alone never turns ligatures on by itself, the property needs to be explicitly enabled too, and the font itself has to actually contain ligature glyphs in the first place, which Fira Code and Cascadia Code both do.
What does the editor.fontWeight setting control?
It controls how thick or thin your editor text renders, accepting values like “normal,” “bold,” or numeric weights typically between 100 and 900. Not every font ships every single weight though, so asking for a number that isn’t supported usually just falls back to the nearest weight actually available.
Which is better for VS Code, Fira Code or JetBrains Mono?
Honestly, neither one wins outright. Fira Code has the longer track record and wider adoption across the community. JetBrains Mono leans into a taller x-height instead, built for readability at smaller sizes. In practice, developers doing long review sessions tend to gravitate toward JetBrains Mono, while Fira Code stays the more common default pick for everyone else.
Does the font setting apply to Peek and Hover windows?
Yes. Peek definitions, hover tooltips, and inline suggestion widgets all inherit editor.fontFamily and editor.fontSize, since they render on that same editor surface. The one exception is the minimap, which draws its own miniature text independent of whatever the font setting says.
Conclusion
Getting the font right in VS Code really comes down to order, not the settings themselves. Install the typeface at the operating system level first. Confirm it shows up in the font picker. Only then touch settings.json.
Ligatures and line height are cosmetic details, worth doing, but save them for after the base font family actually renders correctly.
One bit of friction is worth expecting ahead of time. Workspace settings.json will override your personal preference the moment a shared repository opens, no matter what your own user settings say locally. Not much you can do about that except know it’s coming.
Pick a font family, write the fallback stack once, and leave it alone after that. Syntax breaks more configurations than font choice ever does, honestly, so getting the string right matters more than which font you actually picked. Bookmark the settings.json path while you’re at it. Every future tweak starts there anyway.
- How to Use Claude Code in VS Code - August 20, 2026
- From Offshore Development Team to U.S. Office: What Tech Companies Need to Plan Before Expanding Stateside - August 20, 2026
- What Are the Best Kajabi Alternatives for Growing Your Online Business? - August 19, 2026
