Text displayed using TrueType (.ttf) font renders distorted/blurred

[Sol34]

I'm loading a `.ttf` file via CSS and definition of `font-face`.

However, in the game the text renders blurry. 

This is what I tried first (the font name is `truetypetest`):
 

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' });

This actually renders almost clearly:

There is still some sort of lighter 'shadow' if you look carefully. Setting the resolution arbitrarily high via the below gives what I want:
 

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' }).setResolution(10);

This renders clearly:

However, I don't want to be setting resolution this way as it's expensive memory-wise. 

Furthermore, if I avoid setting the resolution AND specify a specific `fontSize`, via:
 

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' });

This renders as blurry text:

I should mention that I'm rendering the text inside a container (`GameObjects.Container`). Also, and I suspect this is the key problem - I'm zooming the canvas using:

scale: {
        parent: 'game-canvas',
        zoom: 2,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },

I can't avoid using the zoom at this stage as the art is based off of this requirement. I've also tried using Bitmap font with no luck.

So my question is how do I use my custom font in my game that can render clear text for a wide range of different `fontSize`?

Thanks!