How to create a bitmap from an imported font

I’m trying to load a bitmap font following this tutorial but I’m having problems. This is my current code:

import carbonTypeTexture from "../assets/fonts/carbontype_regular_32.png";
import carbonTypeDescription from "../assets/fonts/carbontype_regular_32.fnt";

class Main extends Phaser.Scene {
    constructor() {
        super({
            key: "main"
        });
    }

    preload() {
        this.load.bitmapFont('carbonTypeFont', carbonTypeTexture, carbonTypeDescription);
    }

    create() {
        this.add.bitmapText(400, 100, 'carbonTypeFont', 'Game Title');
    }
}

And this is the error I get:

XML Parsing Error: syntax error
Location: http://localhost:5000/
Line Number 1, Column 1:

In the webpack configuration I use file-loader to bundle the .fnt file. I have tried the same with JSON (just importing it since, as far I have understood, webpack >= v2.0 load JSON by default) and XML files (with raw-loader), but no result.

The only thing that comes to my mind is that the .fnt, JSON or XML files were not well generated. I first downloaded the .tff font, and generated the bitmap files with fontbuilder (https://github.com/andryblack/fontbuilder).

Try changing the .fnt extension to .xml. it worked for me.