Multiple Fonts: Alternative to Operator Mono in VSCode

“Operator Mono Font” Picture shared by Dan Abramov @ https://twitter.com/dan_abramov/status/700439594337222657

https://angularprojects.com

Did you want to use the Operator Mono font for programming, but could not use it because it was too expensive(approx. $200-$600)?! Undoubtably, it has one of the best ligatures compared to any other font libraries.

Later on, you discovered an alternative font “Fira Code”, and fell in love ❤ with it, but you were not satisfied with its overall experience, and were still thinking of buying the Operator Mono. Why use so much money on a “FONT”?

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations.

It is very rare as a programmer to spend money on tools for obvious reasons, because most of the tools we find in the market are free.

I love ❤ using VSCode, and Thank God it has ligature support (unlike Sublime Text, my previous fav).

The image below shows an alternative way of using two different fonts in your favorite editor VSCode.

My Version of Operator Mono using FiraCode and FlottFlott

To ensure you get what you want, following these simple and easy steps:

1. Download and install both FiraCode and FlottFlott (or another cursive alternative if you want)
2. Install VSCode Extension: Custom CSS and JS Loader
3. Save styles.css on your desktop
4. Update the User settings (settings.json) in VSCode. (note: don’t forget to change the path “ vscode_custom_css.imports”)

Want more control? Open Developer tools in VSCode (Help > Toggle Developer Tools) and see whats styles are applied to which element and change your styles accordingly!! Yayyyy

After going through this article, I hope you found an enjoyable way of writing code. If you have any concerns, or questions to further understand, feel free to comment down below. Don’t hesitate to give me feedback and add on.

Thank you.