Stop pixel font from being blurred when rendered

Question

I am trying to create a little game in a pixel retro look and I am using a pixelated font. Unfortunately I am unable to render the font with edges as sharp as they are in the source font.

About my mcve:

I am using this font for fonts/pokemon_classic.ttf (I found no way to host that font online, so no jsfiddle), but you can use any pixel font you like. The example below renders the font like this:

How can I make this text render as sharp as it is in the source font? It should look like this (edited image):

the scale of root may change during runtime to fit the screen

A less elegant solution which would probably work is to fix the alpha of each pixel to be either 0 or 1 depending on some threshold, but I don't know how to do this.

JS:

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
let scale = 30;
let app = new PIXI.Application();
document.body.appendChild(app.view);

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

let root = new PIXI.Container();
app.stage.addChild(root);
root.scale.set(scale);

document.fonts.load('8pt "pokemon"').then(() => {
    let text = new PIXI.Text("Test", {fontFamily: 'pokemon', fontSize: 8, fill: 0xff1010});
    root.addChild(text);
});

CSS:

@font-face {
    font-family: 'pokemon';
    src: url("fonts/pokemon_classic.ttf");
}

* {
    padding: 0;
    margin: 0;
}

Answer 1

Things that can make text blurry....

1. SCALE_MODE
2. Sub-pixel positioning. Turn on roundPixels when creating new PIXI.Application for v4, v5 you can set globally via PIXI.settings.ROUND_PIXELS = true;, or indivudally, displayObject.roundPixels = true;
3. Scaling

So you're good on #1, but #2 and #3 could be issues.