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;
}

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