Jump to content

How to use custom fonts in a game?


Recommended Posts

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 :)


Link to comment
Share on other sites

Now this is createjs but should help,




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.



		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);
Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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