Using different font style in Phaser 3

Hello,
I’m using phaser v 3.50.0.
This is the Template I use.
I want to use Inter Font with ExtraLight, Regular, SemiBold and Bold styles.
I couldn’t do it using WebFontLoader as it provides error if I add

this.load.addFile(new WebFontFile(this.load, 'Inter-Bold'));

this would also not work

this.load.addFile(new WebFontFile(this.load, 'Inter:wght@700&display=swap'));

So I tried loading it using css and html. It worked while running locally but build doesn’t work.
Can anyone please help me with this?

For that font I would try just 'Inter' first, otherwise Inter:wght@400;700 etc.

Inter is working fine while using WebFontLoader but not Inter:wght@400;700. I can use only Inter.

Now it’s working for me.

These are the changes I made :
Loading font:

this.load.addFile(new WebFontFile(this.load, ['Inter:700', 'Inter:400']));

Add text:

this.add.text(100, 100, 'hello, world!').setFont('700 20px Inter');

This will give a similar result as Inter-Bold.

Still it would be helpful if I could load font locally.
Currently I can run the font locally (http://localhost:8081) but can’t create a build and run it.