Staring at code is a full-time job, so the font it is written in deserves two minutes of setup. Learning how to change font in vscode takes about that long, once you know that VS Code keeps its fonts in settings, not in the font file itself.
Whether you searched vscode change font, vs code change font, change font visual studio code, change visual studio code font or how to change vs code font, every phrasing lands on the same two settings: editor.fontFamily for the code, and a separate one for the terminal.
This guide covers the editor, the terminal, sizes, ligatures, the best fonts worth installing, the Mac and Linux paths, and the questions people actually mean when they ask about HTML and font colour.
QUICK ANSWER
Open Settings and search Font Family. Or edit settings.json directly, which is faster and portable:
Ctrl / Cmd + ,→Search “font family”→Type the font name
Change the Editor Font (Settings UI)
- Open Settings: Ctrl+, on Windows and Linux, Cmd+, on Mac. (Menus: File or Code, then Preferences, then Settings.)
- Search font family. The first result is Editor: Font Family.
- Type the font name exactly as your system knows it, for example JetBrains Mono. Changes apply instantly; there is no save button.
- Set Editor: Font Size on the same screen, and switch on Editor: Font Ligatures if your font supports them.
That is the whole of how to change font settings in vs code for the code you read all day, and it also answers how to change font in vscode editor, which is the same screen reached by the same search.
The path is identical for how to change font in vscode mac: Cmd instead of Ctrl is the only difference, because the settings system is shared across platforms. Settings Sync can even carry your choice between machines.
The Same Change in settings.json
Many developers prefer the file. Open the Command Palette (Ctrl/Cmd+Shift+P), choose Preferences: Open User Settings (JSON), and add the lines below. The JSON route is how to change vscode font once and keep it forever, backed up with your dotfiles.
SETTINGS.JSON: THE WHOLE ARTICLE IN SIX LINES
"editor.fontFamily": "JetBrains Mono, Consolas, monospace",
"editor.fontSize": 15,
"editor.fontLigatures": true,
"editor.fontWeight": "450",
"terminal.integrated.fontFamily": "JetBrains Mono",
"terminal.integrated.fontSize": 14
Notice the commas in the editor value: a font family setting is a fallback stack. VS Code tries the first font, then the next, then a generic monospace. That stack is exactly what people mean by vs code font family, and it protects you on machines lacking your favourite.
The vscode default font, if you have never touched it, is a platform stack of the same kind: Consolas first on Windows, Menlo and Monaco on macOS, a system monospace on Linux, at size 14. Deleting your setting returns you to it.
The Terminal Has Its Own Font
The integrated terminal ignores the editor font until you tell it otherwise, which is why how to change font in vscode terminal is its own question. Search Settings for terminal font family, or use the JSON keys shown above.
For how to change terminal font size in vscode, the sibling key is terminal.integrated.fontSize. Terminal readers often run one size smaller than the editor, since output is scanned, not studied.
If your terminal shows boxes instead of icons and arrows, the font lacks those glyphs. That is what Nerd Fonts exist for: popular coding fonts patched with thousands of extra symbols, installed exactly like any other font.
EDITOR PANE
const total = items
.filter(i => i.price >= 10)
Setting: editor.fontFamily
INTEGRATED TERMINAL
$ npm run build
✓ built in 1.2s
Setting: terminal.integrated.fontFamily
Two panes, two settings, one common confusion resolved: changing one never changes the other, in either direction.
Font Size, Zoom and Weight
For how to change font size in vscode, editor.fontSize is the setting, and how to change font size in visual studio code is the same answer with the long name spelled out. Most developers settle between 13 and 16; your eyes, your call.
Do not confuse it with zoom (Ctrl+= and Ctrl+-), which scales the whole window, menus included, and resets per window. Zoom is a presentation tool; fontSize is a preference. Set the preference, zoom for the meeting.
Weight is the underused third dial: editor.fontWeight accepts values like 300 to 700 on variable fonts. A slightly lighter weight at a slightly larger size is the combination many tired eyes end up loving.
Installing a New Font (Windows, Mac, Linux)
A font must exist on your system before VS Code can use it; the editor has no font installer. For a safe vs code font download, take fonts only from their official homes: the JetBrains site, GitHub releases, or Google Fonts.
On Windows, open the downloaded .ttf or .otf and click Install, or drag it into Settings, Personalisation, Fonts. On Mac, double-click and choose Install Font in Font Book. Neither needs a restart of VS Code; new fonts appear in the stack as soon as they are installed.
The path for how to change font in vscode linux is the same inside the editor; only the install differs. Copy the font files to ~/.local/share/fonts and run fc-cache -f, and every app, VS Code included, can see them.
One warning that saves an afternoon: the name in the setting must match the font’s family name exactly as the operating system reports it. “JetBrainsMono” without the space is a different, nonexistent font, and VS Code will silently fall back.
The Best Fonts for VS Code
Asked for the best font for vscode, experienced developers rotate through a short bench of free fonts. All five below are free, actively maintained, and safe from their official sources.
| Font | Character | Ligatures |
|---|---|---|
| JetBrains Mono | Tall, calm, built for long sessions; the modern default choice | Yes |
| Fira Code | The ligature pioneer; arrows and comparisons fuse beautifully | Yes, famous for them |
| Cascadia Code | Microsoft’s own; ships with Windows Terminal | Yes (use the standard build) |
| Hack | Wide and sturdy; excellent at small sizes | No, deliberately plain |
| IBM Plex Mono | A corporate classic with a warm, printed feel | No |
To use the first: install it, then set the family to JetBrains Mono, which is the whole of how to change font in vscode to jetbrains mono. Every step in this guide is identical; only the name in the setting changes.
Same recipe for the Microsoft fans: install it from its official GitHub releases, then change vscode font to cascadia code by name. Windows Terminal users may already have it on the machine without knowing.
And for the ligature lovers: install Fira Code, set the family name, and add "editor.fontLigatures": true, which completes how to change font in vscode to fira code, arrows fused and all.
What About HTML Files and Font Colour?
Two questions wear this article’s clothes but mean something else. If how to change font in vscode html means the code font while editing HTML, it is the editor font above; HTML files use the same editor as everything else.
If it means changing the font of the web page you are building, that happens in the page’s CSS with the font-family property, not in any VS Code setting. The editor displays your code; the browser renders your page. Different fonts, different homes.
Likewise, how to change font color in vscode is not a font question at all: syntax colours come from your Color Theme (Preferences: Color Theme), and token colours can be tuned with editor.tokenColorCustomizations. The font draws the letters; the theme paints them.
One genuine limit, honestly stated: VS Code’s own interface font, the menus and side bar, is not officially changeable. It follows your operating system. Extensions that inject custom CSS exist, but they break on updates and we do not recommend building on them.
It is a pleasant contrast with phones: there, as our guide to changing iPhone text size explains, the system font itself can never be swapped. In VS Code, everything about the code’s appearance is yours to command.
Different Fonts per Language or per Project
One refinement separates the casual settings from the crafted ones: the editor font can be scoped. In settings.json, a language block such as "[markdown]" can carry its own editor.fontFamily and size, so prose reads in a roomy font while code stays compact and monospaced.
Projects can carry their own choice too. A .vscode/settings.json file inside a project overrides your user settings for that project only, which is how teams standardise the editing environment, fonts included, through the repository itself.
And a housekeeping habit worth adopting: the Settings UI and the JSON file are two views of one truth. Edit either and the other updates, so use whichever you are already looking at, and stop worrying about which one is “real”.
SET YOUR OTHER DEFAULTS TOO
Fonts follow you from app to app. If Outlook still greets you in a font you never chose, its default can be set once, for new mail and replies alike, in about a minute.
Real Fonts Here, Pasted Styles Elsewhere
Everything above concerns real font files, drawn glyph by glyph, the craft our article on how Instagram fonts work contrasts with the social-media trick: there, no font is installed at all, and styled text is pasted as Unicode characters.
Both crafts have their place. In your editor, install the real thing and set it properly with the Instagram Font Changer handling the other world, your profiles, where pasted styles are the only game in town.
STYLE SOMETHING FOR FUN
Between commits, the same site styles your bios, captions and posts in 117 copy-and-paste styles. No settings file required, we promise.
IF YOU REMEMBER FIVE THINGS
- ✓ Editor and terminal have separate font settings; change both.
- ✓ The family value is a fallback stack; commas matter.
- ✓ Ligatures need a ligature font AND the setting switched on.
- ✓ Font colour belongs to the theme, not the font.
However you arrived, by font for visual studio code, vs code fonts or visual studio code change font, or the plain wish to change font in vscode, the destination is the same: two minutes in settings, and code that reads the way your eyes always wanted.
GET YOUR OWN CUSTOM FONT
Developers commission fonts too, for docs, brands and products. Ostap Yaromyr designs custom and handwriting-style fonts to order. Write to fontchangermate@gmail.com and describe the look you want.
