Installing Custom Fonts in Atom, and Why I Chose Operator Mono and Fira Code

I couldn't take it any more.

I've tried other variants of script like fonts, but nothing looked as crisp and clean as Operator Mono. Finally, I broke down and got it for myself, and I haven't been happier. Now - I need it to play nice with the other font I use - Fira Code.

If you are new to Atom, or haven't tried editing the stylesheets, this should be a fun overview.

Getting the Fonts

Step one is simply downloading and installing the fonts. I personally add fonts that I want everywhere to my .dotfiles repo so they automatically get installed everywhere. You can use any font management software, or drop in your local font folder.

Operator Mono is not the cheapest font I've used by any means. It's going to set you back about $199 for the basic package. It is, in fact, well worth it. If you aren't looking to spend that kind of cash for a font, you can check out Matthew McFarland's post on alternatives. The LESS in that article is slightly out dated, but in the comments we are all saved.

Fira Code, on the other hand is completely free. My set up, to be honest, only uses Fira Code for it's ligatures. I've tried it both ways, and found that keeping the font family consistent is much easier to read, and using the ligatures for operators just add the embellishments I like to see.

Once you have the fonts installed, the next step will be modifying the styles.less file for Atom.

Edit the Stylesheet

In order to edit your style sheet for Atom - open it from the Atom menu, and click stylesheet.

I have created a gist you can use to get started. Simply copy and paste the code into your file, and save, and you are good to go.

A couple items to highlight -

This bit of style turns off ligatures in your regular expressions and string variables. This has helped me, and came straight from the Atom instructions

atom-text-editor.editor .syntax--string.syntax--quoted,
atom-text-editor.editor .syntax--string.syntax--regexp {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

Another item on that page that is important to call out, is that you may not see all of the ligatures working.

Beware that in some syntaxes selected ligatures might not work. This is usually a syntax parser/tokenization issue (e.g. -> breaks into two symbols by JS/Ruby syntax highlighter).

It's honestly not much of an issue to me, so not a deal breaker at all to use it for the rest of them that do work.

Looking Around Atom

If you want to add/modify your own styles, you can do that as well. The hardest part is knowing what classes to use - but that's actually easier than you might think. Since Atom is built on Webkit, you have access to the developer tools. You can open then from the View menu, click into Developer, and click Toggle Developer Tools (Option-Command-I on the Mac).

Now you can explore all the classes available in Atom to be edited. Have fun!