Best Font for Visual Studio

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

Follow @AbhithRajanAbhith RajanJanuary 15, 2018 · 3 min read · Last Updated: September 25, 2021

Unlike the default user, most programmers do care about the font they are using, so do I. The most used IDEs in my case are the brothers, Visual Studio, and the Visual Studio Code. In both, I use the same font which is Cascadia Code.

Cascadia Code

After reading this article, I switched to Cascadia Code.

The Cascadia Code font is an open-source font developed to improve the readability of program text in plain-text editors such as in the Windows Terminal, Microsoft Visual Studio, and Visual Studio Code.

👉 GitHub - microsoft/cascadia-code: This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

Previously Used

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. Check out 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,

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 the 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 nine years of experience and has a proven successful track record of delivering technology-based products and services.
Connect

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): Please let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <div className="notification is-info is-light">
          <a
            href="/donate/"
            className="button k-button k-primary raised has-gradient rounded"
          >
            Buy me a coffee{" "}
            <span role="img" aria-label="coffee">
              ☕
            </span>
          </a>
        </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): Please let me know how can I improve it?</p>
        </div>
      );
    } else {
      note = (
        <div className="notification is-info is-light">
          <a
            href="/donate/"
            className="button k-button k-primary raised has-gradient rounded"
          >
            Buy me a coffee{" "}
            <span role="img" aria-label="coffee">
              ☕
            </span>
          </a>
        </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>
    );
  }