How to use a tff/otf font with Phaser?

[isfuturebright]

Is there any way to use this kinda of fonts through Phaser? I saw that you have to use CSS3 to add them.

[rich]

They need to be web fonts. I use fontsquirrel.com to convert my TTFs into web fonts.

[isfuturebright]

I see. Thanks.

[Cameron Foale]

Note that if you are using webfonts you need to start your game in the window.onload event, rather than domReady to reliably get them to display.

 

This is the way the Phaser templates are set up.

[rich]

Or just use Googles webfont loader script

[isfuturebright]

I set the game on the window.onload but when the first menu shows up the font isn't loaded yet. I have to go in a another menu and back to see it there. Checking out the google's webfont loader... 

[rich]

One thing I found was that if you have a tag (<p> would do) in the body that uses the font, it will get loaded before DOMContent fires, and appears ok.

 

It's an ugly hack, but it works for testing until you've got webfont loader sorted.

[isfuturebright]

Wow! Amazingly just doing:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=BebasNeue">

Worked . Good god google. Thanks people!

[rich]

Yeah that uses their webfont loader

[CrazySam]

How can we use web fonts that are not provided through the google API?

[rich]

You use the web font loader locally, there is a github project for it. Or just use @font-face in your CSS.

[bfmags]

Hi,

 

I found this article @  http://www.hongkiat.com/blog/webfont-icons/, that might be useful to better understand web fonts

 

I thought since png is indexed (ie. pngquant for 8bit alpha), would not be so prone to jaggy up/downscaling effect, as it happens with jpg format

[rich]

If I need a 16px font in my game I tend to create the bitmap font at least 64px in size, so it scales nicely. But you still don't get as sharp an effect as with CSS / native canvas text.

[ChubbRck]

Thanks for this helpful thread, all. Was wondering if anyone had success getting the Google Font webloader to work with a font that has spaces in the name. For some reason, I can't get a font with spaces in the name to load -

[Batzi]

You use the web font loader locally, there is a github project for it. Or just use @font-face in your CSS.

How do you keep the font even when you go live with the game? Cause now my font doesn't work when the game is live.

[Gob0]

@Batzi: i load fonts using CSS (ttf file is bundled with my other assets) and it works fine when game is running. 

[Batzi]

@Batzi: i load fonts using CSS (ttf file is bundled with my other assets) and it works fine when game is running. 

do you link your css file? What do you mean with your tff file is bundled with your other assets? Can you elaborate more please?

[Gob0]

do you link your css file? What do you mean with your tff file is bundled with your other assets? Can you elaborate more please?

Yup, i can explain a bit more 

 

So my project is structured like that:

- a sub-directory contains JavaScript files, another contains CSS & font files and a last one contains images (something very common imo)

 

- an main page called "index.html" which link a CSS file. 

<link rel="stylesheet" type="text/css" href="css/myCSS.css"> 

- the CSS file (called myCSS.css) contains a font-face tag 

@font-face {	font-family: 'Tarentula';	src: url('tarentula.ttf') format('truetype');}

- In the game, i describe font using an array

{ font: "50px Tarentula", fill: "#FF0000", stroke: "#222222", strokeThickness: 2, align: "center" };

And it works fine. 

 

You can see it in action on these pages: Pick Them all (Halloween)  & Pick Them All (Christmas)

[zajca]

It's possible to use icon fonts? 
I'm trying to use custom icomoon font, but when I do:

let arrow = this.game.add.text(this.game.world.centerX, 100, "\e900", {
            font: "40px icomoon",
            fill: "#FFFFFF"
        });

I see `e900` in canvas. not Icon.

[ximini82]

I also had the same problem with iconmoon. The Problem is that the Phase.Text does not understand asci or uni codes. there is only support for "abc..." and so on. My solution is:

1. Bevore you export the font from iconmoon you have to change the char code value of the icons. for example change "e900" to "a" "b" "c" important only use single character from a-z or 0-9. Than export it. 

2. After that, copy the fonts in correct folder an add the css code.:

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?1qba09');
    src:    url('../fonts/icomoon.eot?1qba09#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?1qba09') format('truetype'),
        url('../fonts/icomoon.woff?1qba09') format('woff'),
        url('../fonts/icomoon.svg?1qba09#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


.workarround
{
    font-family: 'icomoon';
    position: absolute;
   
}

3. Finally add a div or span and give them the class "workarround" with one character minimum.

 <div class="workarround">-</div>

Important DO NOT USE "display:none", to hide the div

4. add a text to your phaser game, give it the correct style and use the defined character signs "a" "b" which you have defined in step (1.)

    var style = { font: "normal 65px icomoon", fill: "#ff0044", align: "center" };

    var text = game.add.text(game.world.centerX, game.world.centerY, "abcde", style);

after that the icons should apear

[ximini82]

It is also possbile with the fontloader (https://github.com/typekit/webfontloader)  just do step 1. and 2. without the .workarround class

3. Add the webfontlibrary to your header

 <script type="text/javascript" src="js/webfontloader.js"></script>

4.add some code the handle the initialisation for the game, only if the font is ready for use!

var fontReady = false;
var windowReady = false;

function fontReady ()
{
    fontReady = true;
    checkIfBothReady();
}
;


function windowLoaded ()
{
    windowReady = true;
    checkIfBothReady();
};
function checkIfBothReady ()
{
    if(windowReady == true && fontReady == true)
    {
        game = new Phaser.Game(window.innerWidth , window.innerHeight , Phaser.AUTO, 'game',{  create: create, render: render });

    }
        
};

5. Add code to use the fontloader for loading your css file with the fontfamilies definitions.

 WebFont.load({
            custom: {
              families: [ 'icomoon' ],
                urls:['assets/styles/index.css']
                ,
                
            }
            ,
              active: function() 
                 {
                  fontReady();
                  alert('loaded')
                },
            inactive: function() {alert('failed')}
          });

6. And the last part add to the body tag an eventhandler for onload: 

 <body onload="windowLoaded()" >

 

[deargle]

On 2/11/2016 at 9:25 AM, zajca said:

It's possible to use icon fonts? 
I'm trying to use custom icomoon font, but when I do:

let arrow = this.game.add.text(this.game.world.centerX, 100, "\e900", {
            font: "40px icomoon",
            fill: "#FFFFFF"
        });

I see `e900` in canvas. not Icon.

I got it to work with glyphicon halflings by simply prepending a `u` to the char code in my phaser add.text call. Like this: "\ue900". Not sure why it worked.

[Igor Georgiev]

Guys, after having a lot of troubles to load ttf/otf font in Phaser when using mozzila and edge (they were displaying properly in Chrome, btw), I found a workarround.

just use this in the CSS:

@font-face {
			font-family: 'fontname';
			src: url("../assets/fonts/font.ttf") format("truetype") local('fontname');

		}

Then you just use this in the preload function:

this.loadFontTF = new Phaser.Text(this.game, 0, 0, 'zzzzzzz', { font: "5px fontName" , fill:"#ea88e7"});
        this.game.world.add(this.loadFontTF);
        this.loadFontTF.alpha = 0.01;
        this.loadFontTF = null;