Luiz Bills Posted February 3, 2014 Share Posted February 3, 2014 How use custom fonts with Phaser? I added on <head><style>@font-face { font-family: X-Scale; src: url('assets/font/x-scale.ttf');}</style> Into <body> works. But in a text rendered by Phaser don't works.var textstyle, textobj;textstyle = { font: '50px X-Scale', fill: '#fff',};textobj = game.add.text(game.world.centerX, game.world.centerY, "Text", textstyle); Link to comment Share on other sites More sharing options...
roscminni Posted February 4, 2014 Share Posted February 4, 2014 I managed to incorporate custom fonts through Google Fonts. After selecting my font I used the javascript include method (I couldn't get the CSS methods to work). This involved copying the js from the Google Fonts site and then placing it at the top of the <head>. Then in phaser I used the following code: var style = { font : '24px "Loved by the King"', fill : "#5e006c", align : "right" };Note that with font names of two words or more the name should be in double quotes. It does not seem to work with single quotes inside double. I'm sure there is a better way of doing this, but this definitely worked for me. Pooya72 1 Link to comment Share on other sites More sharing options...
1-800-STAR-WARS Posted February 4, 2014 Share Posted February 4, 2014 If you use something like jQuery to create the game in $(document).ready(), does it then work? I've not tried in Phaser, but from what I've seen in Pixi, if the font file isn't loaded when the game is initialised it won't pick it up. I also ended up using Google's web font loader to solve this problem. Link to comment Share on other sites More sharing options...
Recommended Posts