JavaScript, Web Development, and other stuff.

🏡 Home

Change your Font in VS Code (Mac)

June 30, 2019 - 1 min read

STEP 1: Find the font you like

Play around with popular programming fonts using this fantastic resource.

STEP 2: Download the font

  • Every font has a download link, like this:

download font

  • Click the download link and follow the instructions to download the font.

** Downloading either a zip or individual .otf or .ttf files is fine.

What’s the difference between OTF and TTF?

STEP 3: Install the font

** If the font came in a zipped file, unzip the file to gain access to the font-files.

Once you have access to the .otf or .ttf file, open the file and click the “Install Font” button.
Example GIF

STEP 4: Use font

  • In VS Code, open the settings panel. Keyboard shortcut: [command ,]
  • Search the settings for “font”
  • In the “Font Family” field, delete the current text and enter the name of the font as it appears in Font Book
    Example GIF
  • If you downloaded more than one font weight, you can also use the “Font Weight” field to update the weight
    Example GIF


Adam Feldman
Written by Adam Feldman who lives and works in Toronto, Canada.