xronn Posted March 16, 2014 Share Posted March 16, 2014 Hi, I understand you cant use ttf/ off fonts with phaser and you need a web font but does anyone know how I can apply a web font I have found on fontsquirrel to all my phaser text! Thanks! Link to comment Share on other sites More sharing options...
rich Posted March 17, 2014 Share Posted March 17, 2014 Just load it in (via CSS typically) and once it's loaded you can use it in a Phaser.Text element like any other font. There is an example showing this for Google Webfonts, so it'd be something very similar I expect. kass 1 Link to comment Share on other sites More sharing options...
Jeff Daze Posted March 21, 2014 Share Posted March 21, 2014 Using webfonts for Phaser is the same as using webfonts for any canvas based application. First you include your webfont references (in this case a Google Font):<link href='http://fonts.googleapis.com/css?family=Almendra' rel='stylesheet' type='text/css'>then you can refer to it by font-family:font-family: 'Almendra', serif;If you are using web fonts with a canvas you'll likely have to do a sort of 'pre-load' of your fonts to have them appear the first time. What I did was create a class that would render, but wouldn't appear onscreen:.fontPreload{ position:absolute; left:-100px;}and be sure to include the CSS references to your fonts as well with whatever code fontsquirrel or Google fonts might provide. then you can add something like this anywhere on the page:<div class="fontPreload" style="font-family: Almendra SC;">.</div>That way your fonts will appear as soon as your canvas is rendered (otherwise you'd have a default font style then it would use the webfont after the first update). Then you're ready to render the text in Phaser with whatever CSS class you created for your webfont//text...var text = "Coins: "+coins;var style = { font: "24px Almendra SC", fill: "#ff0044", align: "center" };var t = game.add.text(10, 0, text, style);Hope this helps! jdnichollsc, kass, Manifest and 2 others 5 Link to comment Share on other sites More sharing options...
Manifest Posted March 25, 2014 Share Posted March 25, 2014 Hey Jeff, Just wanted to say thanks for your response, I've spent all day messing with webfonts in Phaser and yours is the only solution I could get to work. Cheers! EDIT: Actually, instead of your first step, in my CSS I did:@font-face { font-family: "PostinoStd"; src: url('assets/font/PostinoStd.ttf') format("truetype");} Pooya72 and Jeff Daze 2 Link to comment Share on other sites More sharing options...
tdnshah Posted March 17, 2017 Share Posted March 17, 2017 @Jeff Daze Thanks for that great explanation but my game is going to be played in offline mode hence the google apis for fonts wont work i our case so can u you please help me with embedding a ttf or any other way to embed custom fonts file in phaser Link to comment Share on other sites More sharing options...
Recommended Posts