Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How use custom fonts


Luiz Bills
 Share

Recommended Posts

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

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...