Using Operator Mono in Atom

styles.less

/**
 * Using Operator Mono in Atom
 * 
 * 1. Open up Atom Preferences.
 * 2. Click the “Open Config Folder” button.
 * 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
 * 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
 * 5. Tweak away.
 *
 * Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):
 * 1. UI Theme: One Dark (comes with Atom, I believe) — https://github.com/atom/one-dark-syntax
 * 2. Syntax Theme: Oceanic Next — https://github.com/voronianski/oceanic-next-theme
 */

atom-workspace,
atom-text-editor {
    font-family: "OperatorMonoSSm-Light";
    font-size: 14px;
    font-weight: normal;
    line-height: 1.7;
}

atom-panel.tool-panel {
    font-size: 0.88em;
}

.editor .comment,
atom-text-editor.editor .syntax--comment {
    font-family: "OperatorMonoSSm-LightItalic";
    font-style: normal;
}

Awesome! Italics working on html files with @gdeividas snippet but not in js. Language is set to "Babel ES6 JavaScript", but still not working. Any suggestions?

Same here, have tried both Javascript (JSX) and Babel ES6 Javacript, I get italics on the comments but not on things like keywords.

Edit:
Nvm, fixed. Was using a different theme. Switched to oceanic and everything is peachy now 🍑

Thanks for the suggestion @rongierlach. Tried switching to oceanic-next with no luck. Then tried oceanic-reef-syntax and it's working like a charm. 💃

Edit: Didn't actually like oceanic-reef-syntax. The html syntax coloring is not what I expected. I switched back to oceanic-next but I had to tweak a little bit to get my js files working with this sweet font. Open the atom settings view and click on "Open Config Folder". Open the file packages/oceanic-next/styles/base.less. Add this line to the less file:

.variable.parameter, .entity.other.inherited-class, .storage.type, .entity.other.attribute-name.pseudo-class.css{
  font-style: italic;
}

Save, switch theme to One Dark and switch back to Oceanic Next again. You should be good to go now 💃

Hi guys, can you please let me know if the Operator Mono ScreenSmart Book font is only premium font, which cost like 199 usd?

Please excuse my "stupid question"!

Thank you in advance
Best Regards.

just to add to the thread on this. The only way I could get styles.less edits to actually be applied to the editor window was to look into the shadow-dom.

.editor, atom-text-editor::shadow {
  .entity.other.attribute-name {
      font-style: italic;
  }
}

@brandondurham How do I install the Operator Mono? All I see is a link to buy it

@Dajust It is not a free typeface, unfortunately.

$200 for the font. Expensive.

This IS possible to replicate in Sublime!

if you want the comments to be super fun and cursive too, add:

atom-text-editor::shadow{
  .comment {
    font-style: italic;
  }
}

which would make the whole thing look like:

atom-workspace,
atom-text-editor {
  font-family: "Operator Mono";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
atom-panel.tool-panel {
  font-size: 0.88em;
}
.entity.other.attribute-name {
  font-style: italic;
}
atom-text-editor::shadow{
  .entity.other.attribute-name {
    font-style: italic;
  }
  .comment {
    font-style: italic;
  }
}

It looks fantastic.

FYI for those wondering what "JavaScript (JSX)" or "Babel ES6 JavaScript" is, they are in the language-babel package.

can we use this in mono develop osx?

This is not working anymore because Atom deprecated the shadow DOM from the text-editor element, any ideas how to make it work again?

supposedly by prepending classes with syntax-- but I haven't seen this work.
Edit: actually when I applied it correctly it did work!

Here's a note atom gave me about it:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow .constant, atom-text-editor::shadow .variable => atom-text-editor.editor .syntax--constant, atom-text-editor.editor .syntax--variable
atom-text-editor::shadow .entity.other.attribute-name => atom-text-editor.editor .syntax--entity.syntax--other.syntax--attribute-name
Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

@rullyramanda and @jackgeek

I just added an update that should fix the comments issue. It’s working on my end.

.editor .comment,
atom-text-editor.editor .syntax--comment {
    font-family: "OperatorMonoSSm-LightItalic";
    font-style: normal;
}

for Windows laptop:

atom-workspace,
atom-text-editor {
    font-family: "Operator Mono Light";
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
}
atom-text-editor {
    font-size: 18px;
}
atom-panel.tool-panel {
    font-size: 0.88em;
}
.entity.other.attribute-name {
    font-style: italic;
}
atom-text-editor.editor {
    .syntax--entity.syntax--other.syntax--attribute-name {
        font-style: italic;
    }
}

For JavaScript development, would be missing to add:

.syntax--this.syntax--js { font-style: italic; }

Try 'Vibur' by google fonts for free 'Operator Mono' alternative

@mohdhazwan How did you do this? I installed Vibur and i get the cursive style everywhere. Did you edit atom's stylesheet?

@prsnnami I got it working by installing Vibur via Sky Fonts and then adding the following to Atom's styles.less file:

.entity.other.attribute-name {
    font-family: Vibur;
    font-weight: lighter;
    font-style: italic;
}
atom-text-editor.editor {
    .syntax--entity.syntax--other.syntax--attribute-name {
        font-family: Vibur;
        font-weight: lighter;
        font-style: italic;
    }
}

For those still looking for alternatives like Vibur, Fira Code is also a great alternative to Operator Mono, but I personally still prefer Operator Mono.

@brandondurham, have you tried a syntax theme that uses bold face for some of the markup elements? It seems to me that Atom (and VS Code for that matter) fake the bold face instead of using the true bold face that comes with the font family. Or is it just me and my Linux machine?

Has anyone had this setup work for VS Code ?

This worked for me in Atom 2

atom-workspace,
atom-text-editor {
    font-family: "OperatorMono-Light";
    font-weight: normal;
}

atom-panel.tool-panel {
}

.editor .comment,
atom-text-editor.editor {
    font-family: "OperatorMono-Light";
    font-style: normal;
}

.syntax--keyword, .syntax--control, .syntax--attribute-name {
  font-style: italic;
}

The following works fine on Atom 1.21.2 on macOS Sierra

.atom/styles.less

atom-text-editor,
atom-workspace {
    font-family: "OperatorSSm-Book";
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

atom-panel.tool-panel {
    font-size: 0.88em;
}

.editor .comment,
atom-text-editor.editor .syntax--comment {
    font-family: "OperatorSSm-LightItalic";
    font-style: normal;
}

.syntax--attribute-name,
.entity.other.attribute-name,
.syntax--control,
.syntax--keyword {
    font-style: italic;
}

And as @caroso1222 mentioned above:

packages/oceanic-next/styles/base.less

.entity.other.attribute-name.pseudo-class.css,
.entity.other.inherited-class,
.storage.type,
.variable.parameter {
    font-style: italic;
}

@mrclayman have you tried defining a separate font for the bold variant? That's what's usually done in web design and since Atom is an electron app I would assume the same is required.

@imyxh, it was actually the font family setting in the font files themselves. Once I changed that setting through FontForge, the problem went away.

@mrclayman — Yes, it depends on how the source fonts want to have their weights declared. With some, you can’t use weight like bold or 700. You have to declare each “style” individually. Hope it worked out in the end!

Indeed, @brandondurham. I use Linux, which usually uses a font configuration system called "fontconfig" that appears to rely on TTF-based weight settings. After tweaking the weight settings in the font files, everything started working beautifully. 👍