Display jagged fonts using HTML / CSS

Question

I need to render some text using HTML / CSS without any screen smoothing or aliasing, or anything of the sort. The text rendered using this font also needs to have an outline. The use case is that I want the background color of the body that the text is used on to be used as a transparency key for external applications, and I would like the text to be solid and crisp, without any smoothing. This is what it looks like at the moment:

I'm developing an app using electron. I have tried everything from text-rendering: optimizeSpeed and font-smooth: never to rendering the text using a HTML5 canvas, but I can't seem to get the output I want, which is something exactly like this, which is from an application made using C#:

Both images are magnified 1000%. Is it possible using HTML / CSS? if not, what is the closest I could possibly get?

Answer 1

This is about as close as i can get.

JSFiddle

h1 {
font-family:'Press Start 2P', Arial;
font-weight: 400;
color: white;
font-size: 30px;
font-smoothing: antialiased;
text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, -8px -8px 0 black, 8px -8px 0 black, -8px 8px 0 black, 8px 8px 0 black;
}

Play with the text-shadow to gain different results. Basically you can stack them to your needs. It surely needs some tweaking.

Another good Question about it: Outline effect to text

Edit

The Font i used is Press Start 2P. Its a Google Font and you can find it here.