Blurry bitmapFont because game scaling


Hi Guys,
so I think I know what the issue is, but I dont know how to fix it properly.
Using Littera to create bitmapFonts.
My code:
var transparent = false;
var antialias = false; = new Phaser.Game(500, 320, Phaser.CANVAS, ‘’, this, transparent, antialias);
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignHorizontally = true;
game.js:‘nokia16’, ‘assets/fonts/font.png’, ‘assets/fonts/font.fnt’)
var story =, 0, ‘nokia16’, ’ I dont know how to fix it’);

but even if I disable the this.scale.scaleMode the font is still blurry. only if I also set the scale to 0.5 it gets clearer.


Try story.smoothed = false; and let us know


smoth false
smooth true

but I played a bit more with littera and font sizes. I figured out that phaser always outputs the font at the same size.
So if my littera font size is 5 or if my font size is 100 it is the same size in my phaser game. That should be the issue, but I dont know why phaser is doing that.
FontSize 16
FontSize 100
(console for size reference)


As you can see you can change its size by changing the size parameter but I don’t understand why the font you’re using is doing this

If it’s doesn’t causes a problem, can you upload it in this thread so we can take a look at it


Ok thats good. I never used the size parameter. I used scale instead.
I have this problem with every bitmap font. Also tried it with the phaser2 example bitmapFonts => the same problem.

General questin:
So bitmap fonts are not good for up- and downscaling, I should use them in the same size as I generated them with littera. Correct?

I can not upload the .fnt file but here is a screenshot


By using the bitmap fonts available in the examples you can see that it’s possible to assign them diffrent sizes


ok cool my font looks like this without this command:
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
So is there a way I can still use this command for my game but NOT for the font?
or can I use a different command which will upscale my game but not the font?
or should I upscale the game by 2 and than downscale the font by 2 but I think I will loose some quality if I do it like that?


Shall we open another thred for this question ? or think it’s still dealing with the scaling of the font ?


If you’re making your own BitmapFonts, you should definitely pass a size argument, because Phaser will use a default value of 32.


I think it’s still the scaling, but correct me if I am wrong.
Lets say my game width is 500, my window.innerWidth is 1000, so my game is upscaling by factor ~2, which means it upscales everything. If I add a bitmapFont with size 16, due to the upscale it is technically size 32 and this causes the blurry/unsharpness. Correct?


Yes, game/canvas scaling will smooth everything, including the bitmap fonts. The reason I mentioned size is that if that’s not correct, the text may look bad even if the game isn’t scaled.

You should use something like

new Phaser.Game({
  width: 500,
  height: 320,
  renderer: Phaser.CANVAS,
  antialias: false,
  crisp: true


ok thanks for mentioning the size again.
Is there a way I can figure out by which factor my game was upscaled, so I can say for example: Littera font size was 16.

var story =, 0, ‘nokia16’, ’ I dont know how to fix it’, 16);
story.smoothed = false;

I already tried a few things but I didn’t get the factor.



The canvas scale factor is in game.scale.width and game.scale.height.

The natural size of your font looks to be 16. You can find it in