DEV Community

Kelly Andrews
Kelly Andrews

Posted on

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.

Atom Menu -> 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;
}
Enter fullscreen mode Exit fullscreen mode

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).

View Menu -> Developer -> Toggle Developer Tools

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

Top comments (13)

Collapse
 
eoinmurphy profile image
Eoin Murphy

I won't be forking out $200 for Operator Mono, but I just installed Fira Code and I've got to say thanks! It's beautiful. Just a heads up if you're using VS Code, to enable ligatures, you paste the following into settings.json.

"editor.fontLigatures": true
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kiliman profile image
Kiliman

I created a project that will add ligatures directly to the Operator Mono font. github.com/kiliman/operator-mono-lig

Collapse
 
ashaduzzman profile image
Ashaduzzman Akash

sir i cannot use your project pls explain me again

Collapse
 
kiliman profile image
Kiliman

Hi. Can you create an issue on GitHub with your question? I'll be happy to help!

Collapse
 
yuriihabrusiev profile image
Yurii Habrusiev

I'm not sure if $200 font is allowed to be shared on GitLab.

Collapse
 
kellyjandrews profile image
Kelly Andrews

Probably true. I'll take that down. Didn't even think about it.

Collapse
 
kellyjandrews profile image
Kelly Andrews

And done.

Thread Thread
 
yuriihabrusiev profile image
Yurii Habrusiev

But Git remembers everything. It's still available from one of the commits 🙂
Btw, interesting tasks - remove file from entire git repo. I found this article about this topic dalibornasevic.com/posts/2-permane...

Thread Thread
 
kellyjandrews profile image
Kelly Andrews

Good find. Thanks.

Thread Thread
 
kellyjandrews profile image
Kelly Andrews

Found a better one from gitlab - help.github.com/articles/removing-...

Basically the same thing, but easier to follow. Worked like a charm as far as I can tell.

Thanks again for spotting that.

Collapse
 
josegonz321 profile image
Jose Gonzalez

Fira Code rules. It's the best font I've come across. I wrote about it a while ago.

First thing after installing an IDE or editor, I set its font to Fira Code.

VS Code in Fira Code is effing sweet. Try it!

Collapse
 
mjcoder profile image
Mohammad Javed

Cool article. Will take a look at this Fira Code font. Is this font available on Sublime Text 2?

Collapse
 
geekbro profile image
Geek • Edited

As long as you have a font installed on your system, it's available system-wide. Thus, it's available for your sublime text as well.