atom-text-editor {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-family: "Operator Mono";
font-weight: 500;
line-height: 1.7;
}
For Atom version < 1.13.x
atom-text-editor::shadow {
.storage.type.function.arrow,
.keyword.operator:not(.accessor),
.punctuation.definition.entity.css {
font-family: 'Fira Code';
}
.string.quoted,
.string.regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
}
For Atom version >= 1.13.x
atom-text-editor.editor {
.syntax--storage.syntax--type.syntax--function.syntax--arrow,
.syntax--keyword.syntax--operator:not(.accessor),
.syntax--punctuation.syntax--definition {
font-family: "Fira Code";
}
.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
}
Save file and it's done.
Works fine with Javascript:
@Phavor
Open Atom's stylesheet in Atom > Stylesheet..
Modify the sections to look like the following, the spans are the important part. You can find these class names by browsing through the editor in syntax of your choice using the developer tools (Option+Cmd+I).
`atom-text-editor.editor {
.syntax--storage.syntax--type.syntax--function.syntax--arrow,
.syntax--keyword.syntax--operator:not(.accessor),
.syntax--keyword.syntax--type,
.syntax--punctuation.syntax--definition {
font-family: "Fira Code";
}
span.syntax--keyword.syntax--control,
span.syntax--storage.syntax--type,
span.syntax--storage.syntax--modifier {
font-family: "Operator Mono";
font-style: italic;
}
`