How to use custom fonts in a game?

[iceherosubzero]

Hello All,

 

I need to know how can I use custom fonts in my game and what all steps are needed to upload the font files and game files on a web server.

 

I have uploaded all my game files and also my font files that I am using in my game.

 

The problem I am getting is, on my local machine the font is getting rendered properly when I load my game from the web link but, when the same url I use to test my game on a different machine the font is not the same.

 

How can I go about doing this.

 

I tried using this in my code (HTML file):

<style type="text/css">        @font-face {            font-family: 'VAGRoundedBold';            src: url(http:www.spielstudios.com/focus/Worldoo/1/assets/VAG Rounded Bold.ttf);}        body{            margin: 0;            font-family: VAGRoundedBold, Arial, Helvetica, san-serif;        }               </style> 

and for the font text javascript using Phaser:

var timeText;timeText=game.add.text(timerImg.x,timerImg.y+15,"60",{font:"40px VAGRounded",fill:"#ffffff",wordWrap:true,wordWrapWidth:timerImg.width,align:"center"});            timeText.anchor.setTo(0.5,0.5); 

Thanks and Regards,

iceheros

 

[harrywatson]

Now this is createjs but should help,

 

      http://www.createjs.com/tutorials/Fonts/

 

I think it's just a matter of referencing the font in the head of your html;

 

<link href='http://fonts.googleapis.com/css?family=Walter+Turncoat' rel='stylesheet' type='text/css'>

 

Then referencing  in your 'game text', in this case, I'm using createjs but you should be able

to twist it into Phaser, or any / or no engine. Thanks google fonts - have to be online though

for it to work. No need to upload fonts to your own server. Google Fonts have a nice intuitive

way of leading you through the process.

 

http://www.google.com/fonts/

		cluetxt = new createjs.Text("Door Panel Activation Key","20px Walter Turncoat","white");	cluetxt.x = canvas.width/2;	cluetxt.y = 525;	cluetxt.alpha = 0;	cluetxt.lineWidth = 300;	cluetxt.textAlign = "center";	itemlist.addChild(cluetxt);

[tharixxx]

You can use like this

<style>        @font-face {            font-family: RAVIE;            src: url(assets/fonts/RAVIE.ttf);        }    </style>

then access it using createjs

cluetxt = new createjs.Text("YOUR TEXT HERE","20px 'RAVIE'","white");