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

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