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.

[sebastianrothe]

The problem is: current versions of VSCode don't expose these styleclasses.

[kencrocken]

I use VSCode ... generally I picked a theme that focused on italics ... I use the One Dark Italic theme.

Then, with the help of the Custom JS and CSS plugin, I modify the the .mtki class which is used for italics. If you need to find the class names, you can toggle the developer window and inspect the elements.

[talon-himself]

@nemoDreamer @kencrocken thanks that helped! @nemoDreamer, one more thing, what Atom theme are you using?

[nemoDreamer]

Oooooh, don't get me started, @t-hughes ...! I could talk about theme combos for hours 😜

I'm currently running the excellent Atom Material UI theme (https://atom.io/themes/atom-material-ui) with the Pure Syntax theme (https://atom.io/themes/pure-syntax). Pure also pairs really nicely with the Pristine UI theme (https://atom.io/themes/pristine-ui).

And [shameless plug following...] if you're interested in a theme that's easy on the eyes while working outside: https://atom.io/themes/nemodreaming-theme

[sandangel]

Can someone tell me at this time what is the best solution work with vscode?

[Sussumu]

I'm using this project already mentioned here: https://github.com/kencrocken/FiraCodeiScript

The only thing I don't like is that I wasn't able to find a nice theme with italics and bold highlights. But besides that the font is pretty nice and I don't care about comments not being monospaced.

[klippx]

If someone could update the relative font size of the embedded italics in FiraCodeiScript @kencrocken so it became "more or less" monospaced, that would be greeeeeat :)

[kencrocken]

@klippx If I have to open FontForge ever again, it will be too soon ... I have been able to kind of even everything up with the Custom CSS and JS plugin for VS Code ...

Here, with just the font as it is - you can see how the spaces aren't matching up ... everything is a bit out of whack.

I adjusted the letter-spacing and font-size with the plugin ... to essentially,

// .mtki = italics
// .mtk5 = comments

.mtki, .mtk5 {
    letter-spacing: .13em;
    font-size: 1.05em;
}

The above adds a bit of space to the Script font and brings it pretty close to Fira. One thing to note, the Script font won't connect, there will be a slight gap between letters - doesn't bother me, I think it looks pretty good ...

[idbartosz]

Thank You for this useful topic, after some tinkering in vscode I've finally get some satisfying result.

Try it Dark++ Italic VSCode theme 👈

[sygint]

What's the plugin showing the dependency sizes? That's cool!

On Thu, Nov 30, 2017, 5:00 PM idbartosz notifications@github.com wrote:

Thank You for this useful topic, after some tinkering in vscode I've finally get some satisfying result.

[image: vscode] https://user-images.githubusercontent.com/21260478/33462868-8a194b58-d63a-11e7-88d7-ed7c0be8ace8.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-348370371, or mute the thread https://github.com/notifications/unsubscribe-auth/AA1QufKwPYZFw__J2DpfR-DfNblEvLgIks5s70-6gaJpZM4KYfiQ .

[idbartosz]

@gnarmedia Import Cost VSCode Extension

I've added a Dark++ Italic theme which is basically an superset of default VScode Dark+ theme with some improvements and guides how to install Fira Code iScript or Operator Mono. Maybe it will help someone :-)

[pandaa880]

Can anyone please put up something like step by step way for using this alternative in vscode. I don't understand much but i really want to try it.

Thanks.

[idbartosz]

@pandaa880 In notes of my Dark++ Italic theme You got step by step installation guide :wink: Just follow theese two sections: Install and Adding support for Fira Code iScript.

[pandaa880]

@idbartosz works like a charm but, is there same available for one dark theme ?

[idbartosz]

@pandaa880 Search in VScode Market for some variation of One Dark Italic theme and it should also work :-)

[pandaa880]

Yes, i tried one dark italic but it didn't work. what it did was,

it cursived comments and used fira code for normal code. i don't know what went wrong.

On Jan 18, 2018 5:15 PM, "idbartosz" notifications@github.com wrote:

@idbartosz https://github.com/idbartosz Search in VScode Market for some variation of One Dark Italic theme and it should also work :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-358623153, or mute the thread https://github.com/notifications/unsubscribe-auth/AcJEKuBBfAElios5UviBF3F5AS1YJqECks5tLy70gaJpZM4KYfiQ .

[idbartosz]

Probably those themes are not written properly to support italic fonts. You can't do too much with it.

[pandaa880]

can i just change colors in your theme? so that i can get theme like one dark

On Jan 18, 2018 5:31 PM, "idbartosz" notifications@github.com wrote:

Probably those themes are not written properly to support italic fonts. You can't do too much with it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mikaelbr/open-source-ideas/issues/10#issuecomment-358626560, or mute the thread https://github.com/notifications/unsubscribe-auth/AcJEKqukbgrquZEtPDhWgN8Ewpknj2Lfks5tLzKhgaJpZM4KYfiQ .

[idbartosz]

@pandaa880 Sure 👍

[frenchtoast747]

Hey all, I don't know if this is copyright infringement or not, but I thought I would at least share anyway.

tl;dr It's possible to create a custom font from two existing fonts. An example from combining FiraCode + Script12 BT:

I really don't like the idea of editing the VSCode's CSS (it works, but it's begging for things to be broken and/or require constant maintenance and I've never really been a fan of monkey patching). I also noticed that the best approach was to change the font-family for the different .mtk classes and different themes would use different CSS classes for the various tokens. So, the CSS file would need to change for each new theme (I know, I know: who changes their themes often enough to care?) I digress...

Anyway, it's possible to take both Fira Code and Script12 BT (or whatever your favorite script font is) and combine them into a new single font. This idea was spawned by Operator Mono itself. Download your favorite fonts as well as a neat program called Font Forge. After installing Font Forge, start it up. I started by opening up FiraCode-Regular.otf (instead of one of the bolder or lighter variants). I got a warning box about the Mac and Windows font names differing. Ignore and close that dialog if you see anything like it.

Alright, time to create your own font. In the main glyph window, select the Element menu and select Font Info

The PS Names menu should already be selected

All we need to do now is change the name to something custom. E.g., I chose MyOperatorMono. Do this for the Fontname, Family Name, and Name For Humans fields.

One more change. Use the selector list on the left of the Font Info pane and select TTF Names

The one line to change here is the Fullname which still refers to FiraCode-Regular. Change that to the font name you chose in the last step, e.g. MyOperatorMono, and keep the -Regular suffix. Each font name needs to have its own suffix. But the FontFamily for each variant should be exactly the same.

Click the OK button to accept all of the changes. You should then see a dialog saying that the name has changed and is asking you whether you want to generate a new Unique Id. Since we want to recognize this a new font apart from FiraCode, select Change

Now, all that's left is to export the "new" font. Select File > Generate Fonts.... Change the font file type to OpenType (CFF), uncheck the box for Validation Before Saving and change the save name to the variant of the font family. Since I started with FiraCode-Regular my output filename will be MyOperatorMono-Regular. Click the Generate button to save the font file to disk.

On Windows, double click on the new font file to install it. On Ubuntu, I had to right click and select Open with other Application, and then select the Fonts program.

Now, all that's left is to create the "italic" variant for our new font. I chose Script12 BT which is a .ttf file. Thankfully, FontForge handles that file type as well.

Repeat all of the above steps for Script12 BT changing the following settings for the font info:

Fontname: MyOperatorMono-Italic
Family Name: MyOperatorMono
Name For Humans: MyOperatorMono Italic
Weight: Regular

And change the following settings in the TTF Names info:

Famliy: MyOperatorMono
UniqueID: MyOperatorMono-Italic
Fullname: MyOperatorMono-Italic

Note: in order to change some of the above settings (if the values are red), you may need to right click on the value and select Detach from PostScript Names. This allows for the field to be editable.

I got another error about the EM size being too large when trying to generate the fonts. I just ignored this and continued on with the generation. It seems to be working without changing anything. YMMV

Install this variant of the font the same way as the regular variant.

Now, the moment you've all been waiting for: using the font in your favorite editor. Follow the instructions for your editor to change the font to the new font name MyOperatorMono. In VS Code it's as simple as:

"editor.fontFamily": "MyOperatorMono, monospace",

Note: whatever name you chose for Font Family in FontForge is the name you use here!

And that is how I got my own version of Operator Mono in VS Code without altering the editor's private stylesheet. This font will work for all themes that support italics and will render the theme as the theme author intended, which I think is the best part. Again, since I'm not sure about copyright infringement, I won't upload the fonts themselves. I figured that sharing how to Frankenstein two fonts together is probably more useful anyway since now you can use any font rather than the fonts that I chose.

There may be some caveats with spacing or width, etc. You may need to get more comfortable with FontForge to adjust some of the other settings to make the two fonts equivalent in size. I'm fine with the resultant font, so I didn't venture further.

Hope this helps someone! Good luck, have fun!

[idbartosz]

Hi @frenchtoast747 and thank You for sharing this tutorial with us. You've basically done same thing as @kencrocken with his font merge called Fira Code iScript.

[frenchtoast747]

Wow, @idbartosz, somehow I completely missed the fact that @kencrocken has a repo with the same mash-up. I should have picked other fonts for my example. Thanks for that @kencrocken!

[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: https://github.com/open-source-ideas/open-source-ideas/issues/10#issuecomment-272638840

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.