Best Font for Visual Studio

Looking for the best font for programming? Checkout the top three here.

Follow @AbhithRajanAbhith RajanJanuary 15, 2018 · 2 min read · Last Updated: January 21, 2020

Unlike the default user, most programmers do care about the font they are using, so do I.

Currently Using

JetBrains Mono

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose. Checkout the official website. The website itself is MARVELLOUS.

👉 JetBrains Mono: A free and open source typeface for developers

VS Code Settings

1"editor.fontFamily": "JetBrains Mono, Fira Code",
2"editor.fontSize": 13,
3"editor.fontLigatures": true,
4"editor.letterSpacing": 1.2,

Previously Used

Fira Code

Monospaced font with programming ligatures.

👉 GitHub: tonsky/FiraCode

All the instructions to install the font and configuring it in the IDE’s including Visual Studio and Visual Studio Code is documented in the wiki.

Fantasque Sans Mono

Fantasque Sans Mono is my choice for the past two years. You need to try it to see how good it is.

A programming font, designed with functionality in mind, and with some wibbly-wobbly handwriting-like fuzziness that makes it unassumingly cool.

👉 GitHub: belluzj/fantasque-sans

How to install new font (windows)

Download the font from here
In the ttf folder, double-click each font file, click “Install font”; to install all at once, select all files, right-click, and choose “Install”.
Open Visual Studio settings. Tools > Options > Environment > Fonts and Colors > Choose Fantasque Sans Mono from the font list > OK.

Let me know which one is your favorite in the comments below 👇

Additional Resources

visual-studio ide awesome-list

Written by Abhith Rajan Follow @AbhithRajan
Abhith Rajan is an aspiring software engineer with more than 8 years of experience and proven successful track record of delivering technology-based products and services.
Buy me a coffee ☕

function AskForFeedback() {
    const [isHelpful, setIsHelpful] = React.useState();
    let note;
    if (isHelpful === "yes") {
      note = (
        <div className="notification is-success is-light">
          <h5>
            👊 that ⭐️ button on the official{" "}
            <a
              href="https://github.com/Abhith/abhith.net"
              target="_blank"
              rel="noopener noreferrer"
            >
              GitHub repo
            </a>
          </h5>
          <p>
            It'd be awesome if you could leave a comment below! <br />
            &#123; thank you ♥ &#125; is enough
          </p>
        </div>
      );
    } else if (isHelpful === "no") {
      note = (
        <div className="notification is-warning is-light">
          <h4>Sorry about that!</h4>
          <p> TODO(abhith): let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <div className="notification is-info is-light">
          <h4>Show some ❤️</h4>
          <p>Share this page on Twitter to appear on the webmentions* 💡</p>
        </div>
      );
    }
    return (
      <div className="content">
        <h3>Was this helpful?</h3>
        <div className="buttons is-centered">
          <button
            className="button is-success is-light"
            onClick={() => setIsHelpful("yes")}
          >
            👍 Yes
          </button>
          <button
            className="button is-warning is-light"
            onClick={() => setIsHelpful("no")}
          >
            👎 No
          </button>
        </div>
        {note}
      </div>
    );
  }

function AskForFeedback() {
    const [isHelpful, setIsHelpful] = React.useState();
    let note;
    if (isHelpful === "yes") {
      note = (
        <div className="notification is-success is-light">
          <h5>
            👊 that ⭐️ button on the official{" "}
            <a
              href="https://github.com/Abhith/abhith.net"
              target="_blank"
              rel="noopener noreferrer"
            >
              GitHub repo
            </a>
          </h5>
          <p>
            It'd be awesome if you could leave a comment below! <br />
            &#123; thank you ♥ &#125; is enough
          </p>
        </div>
      );
    } else if (isHelpful === "no") {
      note = (
        <div className="notification is-warning is-light">
          <h4>Sorry about that!</h4>
          <p> TODO(abhith): let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <div className="notification is-info is-light">
          <h4>Show some ❤️</h4>
          <p>Share this page on Twitter to appear on the webmentions* 💡</p>
        </div>
      );
    }
    return (
      <div className="content">
        <h3>Was this helpful?</h3>
        <div className="buttons is-centered">
          <button
            className="button is-success is-light"
            onClick={() => setIsHelpful("yes")}
          >
            👍 Yes
          </button>
          <button
            className="button is-warning is-light"
            onClick={() => setIsHelpful("no")}
          >
            👎 No
          </button>
        </div>
        {note}
      </div>
    );
  }