CODEWITHSUNDEEP
javascriptphaser-framework
Kothari Ankit
Kothari Ankit

Reputation: 316

How to use a external font using bitmaptext or text in Phaser 3?

I have a font in a fonts/ directory. How do I load this into the game, then use it on a text object in my game? I haven't been able to find anything on using fonts in Phaser 3.

I tried out multiple methods and property from the

https://labs.phaser.io/index.html?dir=&q=

https://photonstorm.github.io/phaser3-docs

this both link for the phaser3 but not able to set the width of the perticular text

i also try to apply font using css but it also not working for me.

Thanks in advance.

Upvotes: 1

Views: 1896

Answers (1)

yolenoyer
yolenoyer

Reputation: 9445

First, load the font from your css in the normal way, something like this (if the url is relative like below, it must be relative to the css file):

@font-face {
    font-family: "Indie Flower";
    src: url(../fonts/IndieFlower.ttf) format("truetype");
}

Then use the font family in your text objet style:

function create() {
    this.add.text(10, 10, 'My text', {
        fontFamily: 'Indie Flower',
        fontSize: '2.5em'
    });
}

See the Phaser.js docs to see all the available properties.

You may have issues about font loading: I mean the font may not display on load, and you may have to wait for the load then change your text in order to display the font; I'm not an expert about it and there are many different solutions for this. For my part when I tested my answer, I just added this line at the beginning of the html body, and it fixed the issue:

<span style="font-family:'Indie Flower'"></span>

Upvotes: 3

Related Questions