There’s a really cool font out there called Operator Mono. One of the cool things about it is that it completely changes the font to script when the italic modifier is used. The only downside to Operator Mono is the price tag: $600. In this post, I’m going to show you how you can take any two existing fonts (for example Fira Code and Script12 BT) and mash them together to create your own Operator Mono-like font.
If you’re using an editor like VS Code that uses CSS in the background to style the different fonts, a quick and dirty method is to just figure out what CSS classes your current theme is using and patch the font-family attribute when the theme is indicating an italic syntax piece. This can work, but I really don’t like the idea of editing VS Code’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). The CSS is also usually very specific to the current theme. 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!