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

Question

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, 'Almost clear text', { fontFamily: 'truetypetest' });

This actually renders almost clearly:

Almost clear text

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, 'Clear text', { fontFamily: 'truetypetest' }).setResolution(10);

This renders clearly:

Clear text

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, 'Blurry text', { fontFamily: 'truetypetest', fontSize: '20px' });

This renders as blurry text:

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!

UPDATE

I've tried all of the following but with no luck:

• Used Bitmap Fonts (including adding png font-sheets for different sizes
• Tried rex WebFont Loader plugin: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/webfontloader/#test-string (loads font but still blurry)
• Used a normal font like Roboto from the Google Font API. So the problem is not isolated to my particular font style (pixel-style font)
• Tried following the method described here: https://phaser.io/examples/v3/view/game-objects/text/custom-webfont (CSS injection and custom webfont loading)
• Tried multiples of font sizes
• Tried autoRound=true

I find it difficult to believe what I'm trying to do is not possible. Its only text being rendered within a container. I would have thought there's a way of ensuring a single font can be used across a general range of sizes within the game? Failing that, I wouldn't mind using a more exhaustive strategy (multiple different font files at different sizes) if that is needed. There MUST be a way of rendering crisp text within a game? :(