Skip to content

Instantly share code, notes, and snippets.

@hanksudo
Last active September 27, 2023 12:30
Show Gist options
  • Save hanksudo/33ddf24f27f403c00b746b6f12bde746 to your computer and use it in GitHub Desktop.
Save hanksudo/33ddf24f27f403c00b746b6f12bde746 to your computer and use it in GitHub Desktop.
Enable font anti-aliasing on VS Code
vim /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css

add to .editor-container section

-webkit-font-smoothing: antialiased;
  • 2018-02-21 - 1.20.1
  • 2018-02-14 - 1.20.0
  • 2018-01-27 - 1.19.3
  • 2017-11-30 - 1.18.1
  • 2017-10-07 - 1.17.0
  • 1.16.1
@kurdtpage
Copy link

kurdtpage commented May 27, 2019

For Windows users, you need to enable ClearType in Control Panel, and also go into System Properties, Performance and enable Smooth edges of screen fonts

@marckassay
Copy link

Just supplementing @kurdtpage instructions
image

However, mine was already enabled. Having VS Code and Visual Studio viewing the same file on the same monitor here, Visual Studio definitely renders the font (Source Code Pro in my case) less "blurry".

@MichielDeMey
Copy link

MichielDeMey commented Jun 18, 2020

Visual Studio Code now allows you to set this in the setting pane. 👍
Screenshot 2020-06-18 at 11 01 48

@marckassay
Copy link

@MichielDeMey that setting seems to be available for Mac OS only.

@leonardssh
Copy link

Any updates on this?

@iridant
Copy link

iridant commented Oct 23, 2021

Looks like workbench-> Font Aliasing has been removed.. Any suggestions?

@iamcalinprojects
Copy link

For those willing to disable anti-aliasing/smooth edges/cleartype on VS Code as of today, there's no official option inside VS Code program. Instead, I have found this method that works for me and it's thanks to this article: https://medium.com/kasun-kodagoda/fix-text-becomes-blurry-when-vs-code-application-loses-focus-issue-on-windows-d95697b2f927

Here are the steps:

Disable anti-aliasing VSCode

image also here: Disable anti-aliasing VSCode

  1. Right-click on VS Code program and go to Proprieties.

  2. In the "target" section of the app, add the following lines: --disable-gpu --enable-use-zoom-for-dsf

  3. Apply the changes and that's it.

I hope it's useful.

@ahmedpasic19
Copy link

ahmedpasic19 commented Jun 9, 2023

Im on Windows and there is no anti-aliasing option like on mac OS. But I have installed Font Awesome, its exactily the same as the default VSCode font but includes anti-aliasing. https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete

@hanksudo
Copy link
Author

hanksudo commented Jun 9, 2023

Im on Windows and there is no anti-aliasing option like on mac OS. But I have installed Font Awesome, its exactily the same as the default VSCode font but includes anti-aliasing. https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete

It didn't an issue anymore, do you have this option on VSCode?

Screenshot 2023-06-09 at 15 12 28

I use macOS

@ahmedpasic19
Copy link

Im on Windows and there is no anti-aliasing option like on mac OS. But I have installed Font Awesome, its exactily the same as the default VSCode font but includes anti-aliasing. https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete

It didn't an issue anymore, do you have this option on VSCode?

Screenshot 2023-06-09 at 15 12 28

I use macOS

No, on windows we dont have that option.

@nikulxceptive
Copy link

2. --disable-gpu --enable-use-zoom-for-dsf

Thank you Now i see proper fonts.

Config
Pentium Processor,
QHD 27'' Viewsonic Monitor
Fira code font....

I was concered due to bad looking font and now its solved in my big screen thanks,....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment