An alternative to Operator Mono font

If you’ve heard of the Operator Mono Font, then you’ll know that it contains some of the most fabulous looking ligatures. You’ll also know that this font can cost between $200 and $600 which might be out of your budget.

The Atom development environment, configured to use Operator Mono. The family’s distinctive italics make it easier to spot the names of attributes.

After watching Dan Abramov’s videos and presentation, I really wanted to try Operator Mono out. In fact I almost bought it, but after a brief thought-bubble including my wife questioning why I would spend that much for a font I decided I would try to find a free alternative.

I couldn’t find anything that had the mix of cursive and non cursive text, but I did find FiraCode — which does not have the cursive ligatures but does contain some really nice looking operator ligatures:

FiraCode contains ligatures that enhance your operators, in fact it could even compliment Operator Mono.

Create your own alternative to Operator Mono in 3 steps:

So this morning I spent a few hours playing around with fonts and atom to see if I could make something that would compare to the prestige you see with Operator Mono.

Here’s what I came up with:

So if you’d like to have the same, you can do so following these simple steps:

Download and install both FiraCode and Script12 BT (or another cursive alternative if you want)

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. You an download Fira Code on Github https://github.com/tonsky/FiraCode

FlottFlott is a free font I found on dafont.com that I think works well with code. To find a cursive font that works well with code can be a bit daunting, I know because I downloaded at least a couple dozen before deciding that FlottFlott was right for me. Can you find a better one? If so let me know I’d love to make this even better if I can.

EDIT: I later found Script12 BT with big thanks to Ken Crocken for the help!!!

2. After installing the two fonts, paste this code into your styles.less file in Atom

You should now have some cool looking code with ligatures. If you don’t, please leave a comment so I can revise this.

Using VS Code

Check out this post by Mohammed Zama Khan to see how its done in VS Code (Thanks Mohammed!) There’s also a great discussion on github that you might find helpful.

If you want the same coloring, you can use Oceanic Next as the syntax theme.

Let me know if you found this guide useful or if it was missing something critical.

Thanks for reading,

Matt