Unable to Change Terminal Fonts in VSCode (Windows-WSL Ubuntu)

Users cannot change terminal fonts in VSCode on WSL Ubuntu because the editor relies on Windows-side font rendering rather than Linux system fonts. The solution involves configuring the terminal.integrated.fontFamily setting to use a font installed on the Windows host, ensuring the character set supports UTF-8 and avoiding conflicts with the integrated shell environment.

Understanding the Rendering Architecture

When you run a terminal inside Visual Studio Code connected to a WSL distribution, it is crucial to understand that the visual rendering of characters happens on the Windows side, not within the Linux subsystem itself. The WSL instance provides the command-line interface and executes the commands, but the text displayed in the VSCode terminal panel is drawn by the Windows operating system using its own font libraries. This architectural distinction explains why installing a new font via apt inside Ubuntu often fails to affect the appearance of the terminal text. The Linux package manager handles fonts for GUI applications running under X11 or Wayland, but the VSCode terminal uses DirectWrite or GDI for text measurement and rendering. Consequently, any font modification must target the Windows font registry, not the Linux file system. If you are experiencing broader connectivity issues between VSCode and your WSL environment, such as the terminal failing to launch entirely, you may need to verify your default terminal configuration. You can read more about this process in our guide on Changing the Default Terminal in VSCode (Windows 10) to WSL2 Ubuntu 24.04. Ensuring the correct shell path is selected is the first step before troubleshooting visual properties like fonts.

Configuring Fonts via settings.json

The most reliable method to change the terminal font is through the user settings file. Open the Command Palette by pressing Ctrl+Shift+P and type "Preferences: Open User Settings (JSON)". This opens the settings.json file where you can add specific configurations for the integrated terminal. Look for the property named terminal.integrated.fontFamily. If this key does not exist, you should add it manually. The value should be a string containing the exact name of the font as it appears in the Windows Font Manager. For example, if you wish to use Consolas, the line would look like this:

"terminal.integrated.fontFamily": "Consolas",

You can also specify fallback fonts by separating them with commas. This is useful if your primary choice lacks certain glyphs. A typical configuration might look like this:

"terminal.integrated.fontFamily": "Fira Code, Consolas, 'Courier New'",

It is important to note that the font name must match exactly what is listed in the Windows Fonts control panel. Unlike CSS, which allows for flexible naming, VSCode requires the precise family name. If you are unsure of the exact name, open the Windows Settings, navigate to Personalization > Fonts, and search for your desired typeface. Copy the full name from there and paste it into the settings file. After saving the JSON file, restart the terminal panel by closing all existing tabs and opening a new one. The changes will take effect immediately upon creation of the new session.

Using the UI Settings Interface

For users who prefer not to edit JSON files directly, Visual Studio Code offers a graphical interface for these settings. Navigate to File > Preferences > Settings, or press Ctrl+,. In the search bar at the top, type "terminal font family". You will see an input field labeled "Terminal › Integrated: Font Family". Enter the name of the Windows font you wish to use here. This method automatically writes the correct entry to your settings.json file, reducing the risk of syntax errors. After entering the font name, close the current terminal instances. You can do this by clicking the trash icon in the terminal header or using the command "Kill Terminal" from the Command Palette. Open a new terminal tab. The new font should now be applied. If the font does not appear, ensure that the font is actually installed on your Windows machine. Installing fonts only in the Linux subsystem will not make them available to the VSCode renderer.

Adjusting Font Size and Weight

Alongside the font family, you can customize the size and weight for better readability. In the same settings search, locate "Terminal › Integrated: Font Size" and "Terminal › Integrated: Font Weight". These controls allow you to fine-tune the appearance without changing the underlying typeface. A common practice is to increase the font size to 14 or 16 pixels for long coding sessions. Similarly, setting the font weight to "normal" or "bold" can improve legibility depending on the contrast of your color theme. These adjustments are purely cosmetic and do not affect the functionality of the WSL shell.

Troubleshooting Common Issues

Sometimes, despite correct configuration, the font may not update correctly. This is often due to caching issues or incorrect font names. First, verify that the font is installed on Windows. Second, check for typos in the font name within settings.json. Third, clear the VSCode cache by restarting the application completely. If you are still facing difficulties, consider checking if your WSL installation is properly configured. Disk space issues or installation failures can sometimes lead to unexpected behavior in the integrated tools. For more information on maintaining a healthy WSL environment, refer to our article on Why is WSL taking up more disk space than it says it is?. Another potential issue is conflict with other extensions that modify terminal behavior. Disable any terminal-related extensions temporarily to see if the font change takes effect. Additionally, ensure that your VSCode version is up to date, as older versions may have bugs related to WSL integration. GPU acceleration is generally not required for text rendering in terminals, so disabling hardware acceleration is rarely a solution for font issues. Focus instead on the correctness of the font family string and the availability of the font on the host OS.

Frequently Asked Questions

Why don't fonts installed via apt show up in VSCode?

VSCode renders terminal text using Windows APIs, so it only recognizes fonts installed on the Windows host. Linux-installed fonts are isolated within the WSL filesystem and are not accessible to the Windows-side renderer. You must install fonts through the Windows Settings or Control Panel to make them visible.

How do I find the exact name of a Windows font?

Open the Windows Settings app, go to Personalization, and then select Fonts. Search for your desired font and copy the exact name displayed in the list. Use this exact string in the terminal.integrated.fontFamily setting to ensure proper recognition.

Can I use different fonts for different shells in WSL?

No, the font setting applies globally to all integrated terminal instances within VSCode. While you can run different shells like bash, zsh, or PowerShell, they all share the same rendering engine and font configuration. You cannot assign distinct fonts to individual profiles within the same VSCode window.

What should I do if the font looks blurry or distorted?

This usually indicates a mismatch in font scaling or DPI settings. Ensure that your Windows display scaling is set to 100% or that VSCode is not being scaled incorrectly. You can also try enabling "antialias" options in advanced settings or switching to a font that supports ClearType well, such as Segoe UI or Consolas.

Does changing the terminal font affect the code editor area?

No, the terminal.integrated.fontFamily setting only applies to the terminal panel. The main code editor uses the editor.fontFamily setting, which is separate. You can configure them independently to have different typography for coding and command-line interactions.