Free alternative to Operator Mono Italic Theme for VSCode

[mikaelbr]

Update: Solved by @kencrocken

Mashed two fonts together to get an Open Source variant of Operator Mono - https://github.com/kencrocken/FiraCodeiScript.

---

Project description

Operator Mono + Italic keywords in Atom has become a fairly popular combination, but for many the Operator Mono is quite expensive. But luckily, there are open and free alternatives we can use, but as of yet there aren't any ways to do this in Visual Studio Code (as far as I know. Hopefully, if there are, anyone let me know). We can fix this, though.

By combining the guide An alternative to Operator Mono font by Matthew McFarland and something like the Oceanic Next Italic theme it could work seamlessly (I hope).

Relevant Technology

Visual Studio Code, Atom, Syntax highlighting, tmTheme.

Who is this for

People who want to create and publish their own editor theme as free alternative and get a cool syntax highlight in the process. Should be fairly straight forward to copy/fork existing code and just use free font alternatives.

[TimoStaudinger]

I have been working on a Theme based on One Dark with italic highlights instead of Oceanic Next, as I like the colors better. I use it with Operator Mono in Atom, and it works perfectly so far.

Adapting it to use a combination of Fira Code and flottflott shouldn't be more complicated than to hard-code flottflott into the stylesheet and set Fira Code as Font Family in the settings.

The only issue I see is that flottflott is not a monospace font. So far, I wasn't able to find a nice monospace cursive font that could adequately replace Operator Mono's italics.

[mikaelbr]

Cool. Couldn't you have both Operator Mono and Fira Code in the font-family? Making it Operator Mono for those who have that but for those who don't it fallbacks gracefully.

.regularStyleHere {
  font-family: "Operator Mono", "Fira Code", <UserSpecified>, Courier, monospace;
}
.italicStyleHere {
  font-family: "Operator Mono", "flottflott", <UserSpecified>, Courier, monospace;
}

[TimoStaudinger]

Yes, of course. Thing is, according to the Atom guys it is best practice not to specify the font family in the stylesheet at all.

The simple reason for this is that Atom allows you to specify the font family in the Settings:

By overriding this setting in the stylesheet, you basically break this option. Unfortunately, it is currently not possible to specify different different font families in the settings for italic/regular code without editing the user's style sheet.

I'm not sure how much of this also applies to VS Code.

---

I was considering to create a font mashup between Fira Code and a nice cursive monospace font, i.e. adding cursive italics to Fira Code and bundling it as a single TTF file. Both Fira Code and flottflott are licensed under the OFL, which would likely allow that. But then again, flottflott is not monospace, which kind of sucks for programming...

[mikaelbr]

That's why I added <UserSpecified> to the font-family property so it wouldn't entierly break the behaviour. But it would change the precedence and might be surprising for some, but it can be clearly stated as a part of the README (and it's kind of the point of the theme).

I'm trying to find any other monospace signature style fonts now, but no luck for now.

[TimoStaudinger]

Not sure if it is possible to reference the user specified font family from the LESS style sheet. Do you have any references on how this could work?

[mikaelbr]

No, probably not. But depending on whether or not it should be supported it might be possible to make it as a plugin instead. But maybe that's too much?

[rozzzly]

_{( psssst... there totally isn't a torrent out there which can easily be found via google )}

[mikaelbr]

@rozzzly I think this initiative which is all about Open Source, and respecting each others intellectual rights, shouldn't encourage pirating or breaking of licenses.

[mikaelbr]

@timosta I marked this as joined. Would be cool if you keep us updated if you make an open source alternative with a free font and link to it here.

[TimoStaudinger]

Will do. I'm currently experimenting with monospacing a non-mono script font. It's surprisingly hard to make it not look terrible.

[mikaelbr]

Interesting! One step better than a open source theme: an open source alternative to the font it self!

[mikewheaton]

I find Flottflott very difficult to read, and with it not being monospaced I'm surprised to see it recommended for use in code. What a mess.

You'd think there would be monospaced script/cursive fonts out there, as apparently they used to make them for typewriters. I haven't had any luck finding one. The only free monospace font I've found with a decent italic (curved characters, not just slanted) is Ubuntu Mono:

Not as much character as Operator Mono, but I find it more readable. Here it is in VS Code alongside Fira Code, which provides ligatures:

For anyone who wants to give this a try, I've used the Custom CSS and JS extension for VS Code with this CSS:

.comment,
.attribute-name,
.this,
.decorator,
.key:not(.punctuation),
.property-name {
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-size: 1.2em; // Lines up perfectly with Fira Code
}

[mikaelbr]

Agreed. I did some research earlier also, and couldn't really find a monospaced italic font similar to that of Operator Mono. I've been using Fira Code without a special font for italic views and It looks fine, I think.

Example:

[mikewheaton]

I'm going to try the italic for a while and see if it helps with readability, or is just noise. 😄

[fajaryanw]

@mikewheaton after follow your guide with Custom CSS and JS extension

I got this in VS Code:
Warn Your Code installation appears to be corrupt. Please reinstall.

The italic font still use Fira Code. this is no change apperance to Ubuntu Mono.
any ideas?

[mikewheaton]

@fajaryanw: I've seen that warning too, although it went away after a while. So far everything is working just fine so I suspect it's a false alarm.

If you go to user settings, do you have this setting? (updated to your path, of course)

If so, the next thing you can try is to bring up the command palette and run "Update Custom CSS and JS". That should refresh the styles.

If it's still not working, try going to "Toggle Developer Tools" in the menu and inspect the elements to see if the CSS styles are possibly being overridden by another theme or something.

[fajaryanw]

@mikewheaton : Oh yeah ! I only missed one slash / to fix this all.

Thanks a lot :)

[m5lil]

My terminal
Thank you 👍

[fajaryanw]

@mikewheaton : after update VS Code version 1.9.0, the custom doesn't work anymore. The font still use Fira Code. no change apperance to Ubuntu Mono Italic. Do you experience the same thing ?

[mikewheaton]

@fajaryanw: Yes, it looks like the Custom CSS and JS loader extension is not working anymore. I've opened an issue here: be5invis/vscode-custom-css#8

[robmcguinness]

Custom CSS and JS loader does appear to work with the CSS below. Maybe the CSS class names changed between releases? I dismissed the corrupt code warning as well.

/* keywords */
.vs-dark .mtk15 {
  font-family: 'Operator Mono';
  font-size: 1.02em;
  font-style: italic;
}

/* attributes */
.vs-dark .mtk5 {
  font-family: 'Operator Mono';
  font-size: 1.02em;
  font-style: italic;
}

[khyamay]

can confirm @robmcguinness is right, it is working albeit with warning for corrupted code

[nemoDreamer]

I use a combination of Fira Code and "Space Mono":

It took some wiggling w/ letter-spacing to get both mono-spacings to match up.

[robinpokorny]

@nemoDreamer That looks really nice, good combination. Could you share the setting?

[nemoDreamer]

With pleasure, @robinpokorny!

It's for Atom, not VSCode, but should be adaptable:
https://gist.github.com/nemoDreamer/f40be00da6707ee9f3b171144690f94f

(There's also "a Fantasque Sans Mono Italic" variation in there, if you toggle the comments, but I ended up going with something more subtle.)

[klippx]

One huge difference being taking time describe how it’s done. This almost deserves a donation, IMO. @frenchtoast747 you should make a medium post about this, I would clap it. Many many times. Thank you!

[frenchtoast747]

I've never written a Medium post before, @klippx. I might make this my first. Thanks!

[kencrocken]

@frenchtoast747 That is awesome. I take it you have it working with Linux? I had an issue opened regarding Linux compatibility ...

[frenchtoast747]

@kencrocken, with the above steps, everything appears to be working in Ubuntu. The example screenshot was taken with VSCode on Ubuntu 17.10.

[vhanla]

You can use https://github.com/cpitclaudel/monospacifier to adjust or turn any other font to the monospace settings of the target font. That way the modded font will have the same measures on both font styles.

[josuedavidurand]

Hi,
Somebody know the color scheme used by @mikaelbr commented on 14 Jan 2017?
It look amazing.
TY guys

[nemoDreamer]

@josuedavidurand if you hover over a comment's date, you can copy/paste a direct link to it:
#10 (comment)

That scheme looks very much like something that would be called "sea" or "forest" or "pale something or other"... 😜 It really looks delicious... It's like a subtle duotone, but with yellow added.

[josuedavidurand]

thanks for the tip
it's hard to found a theme just with a picture

[mikaelbr]

@josuedavidurand If I remember correctly, that is Behave Theme.

[josuedavidurand]

@mikaelbr Yeay! That's it. thanks man.

[ChristinWhite]

Has anyone found any alternatives to Script12 BT? I don't find it particularly easy to read and would rather find something that's more fancy italic rather than fully cursive like Operator Mono. Ubuntu Mono is the closest happy medium I've found so far.

[kjbappsllc]

@christopherdwhite I use Croissant One. It works well for me

[kosimst]

I have created a font that uses FiraCode as main font and FlottFlott as italic. It should work in every editor. You can find it here: https://github.com/kosimst/FiraFlott

[ta-riq]

I am thinking of "Fira Code"

what do you guys think about it ?

[Jimmerz28]

While the italics aren't as predominant (aka non-cursive) as in Operator Mono, IBM's Plex includes italics in its Mono typeface and as such works with the VSCode italic themes.

https://github.com/IBM/plex
https://www.ibm.com/plex/

[klippx]

Wow. The Plex Mono + Plex Mono Italic would kick ass if bundled together (as per @frenchtoast747 instructions above)

[rubjo]

Hi. You could also have a look at Victor Mono at rubjo.github.io/victor-mono and see if that’s something that works for you. :)

[rellikmil]

But Script12 and Victor Mono don`t have available sources

[Santosh-Gupta]

Does anyone know if this font is a combo too? Seems that it's custom made

https://pbs.twimg.com/media/DckSZXxV0AAFmOF.jpg?name=orig

[rubjo]

Looks like a mashup of two different fonts with little in common to me (different heights, too).

[dqisme]

Also, please check Hactor - a mashup between Hack and Victor Mono italic.

In addition, this solved the selection shaking problem like this:

[hanbalahmed]

thanks!

i made this font

[DawnPaladin]

Cascadia Code released a cursive version in June 2011. The cursive was unpopular (perhaps because it wasn't communicated ahead of time), so Microsoft toned it down in the next release, but the cursive version is still up on GitHub.

You'll need to change some settings in VSCode to italicize your comments. StackOverflow has instructions on how to do that.

[staceybellerose]

Using FontForge, I merged some of the cursive glyphs from Cascadia Code (specifically: f, l, r, s) into my custom build of Iosevka. It's available for download at my iosevka-cursive repo, along with instructions on how I did it.