ScaleManager Issues with Google Fonts

[ldd]

Let me preface this by saying that I have read every single post about this topic, and I simply cannot understand what I'm doing wrong. I am using the latest phaser ce build, 

phaser 2.7.3. My target browser is desktop Chrome (I don't care much for any other browser, mobile platform, etc)

 

Explanation of my issue: I have a text, at position (0,0) [Therefore, no possibility of it no being a whole number, etc]. It is not scaling properly. 

 

=> Minimal fiddle testcase showing my problem: http://jsfiddle.net/1g3cj8md/

=> Expected outcome if game is not scaled: http://jsfiddle.net/encznmqq/1/

Is this a bug? Am I missing anything?
I have tried a couple of things, which are commented out in the fiddle, but it boils down to a bunch of random ideas that I had.

I have no idea how to scale text that is supposed to be pixelated.

I hope someone can help, and that this can help someone.

 

Relevant examples that I have seen (and yes, I have read the docs): 

https://phaser.io/examples/v2/display/render-crisp

https://belenalbeza.com/retro-crisp-pixel-art-in-phaser/

https://phaser.io/examples/v2/text/google-webfonts

 (notice that that link is from 2014)
 

 

and ovbiously, https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html.

So please, can anyone help me?

[samme]

I think that's actually normal. AFAIK canvas text is always antialiased, and the 12px text scaled up to 400% (as in http://jsfiddle.net/1g3cj8md/) will magnify the antialiasing effect even if the canvas itself isn't smoothed.

Do you definitely need to scale the canvas up 400%?

[ldd]

The art is scaled properly, and I use 16x16 assets in a (relatively) small map (16x32). You are right that text antialiasing is a problem, and after googling a bit, it might be possible to disable it, but it is not easy nor readable.

I think this is more of a 'bug' or at least a 'feature request' so I have filed it as such in the github repository.

 

Thanks for the reply though!

[samme]

You should switch to BitmapFont.

Any text magnified by 400% is going to look like that.

[ldd]

Just in case anybody ever finds this topic useful, samme was right.

Here is a fiddle using bitmapfonts: http://jsfiddle.net/o67k4yvk/

Notice how it is nokia16, and not nokia. The font default size matters!

All of that to say that using the correct bitmap font will solve the issue

(I just need to find a commercial-friendly 16font xD)

 

I almost forgot: Thanks a lot samme! Your advice help me solve my problem

Edited February 5, 2017 by ldd
forgot to say thanks