How do you use a webfont in Phaser exactly?

[dnassler]

I have looked at the examples and have looked at the forum link:

 

http://www.html5gamedevs.com/topic/2214-how-to-use-a-tffotf-font-with-phaser/

 

... but I still do not know how, exactly, to specify an arbitrary font/webfont in phaser.  Let's say, for example that I wanted to use a font found on google? What function calls do I need to make? What assets do I need to have? What does my HTML have to look like? What has to be exactly in the JAVASCRIPT file? The examples for Phaser are not helping me  I must be a dummy!

[lessmilk]

Load the Google font in your html or css, and simply use the font name in your text:

this.game.add.text(10, 10, "this is a text", { font: "30px TheFont"} );

Last time I tried, it worked!

[dnassler]

Thanks. I got it to work now.  I think one reason I was having trouble may have been because the font was not totally loaded when I did my game.add.text call. But I noticed that if I added a timer event to set the text then it worked:

 

game.time.events.add(1000, function(){

healthText.setText( totalHealthShooter );

scoreText.setText( totalPrizeHits );

}, this);

[rich]

Here is how you can do it under Phaser 2.0 - you still need the 1 second delay, I've yet to work out a reliable way to avoid that. But at least with this method you don't have to add anything into your html / css.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });//  The Google WebFont Loader will look for this object, so create it before loading the script.WebFontConfig = {    //  'active' means all requested fonts have finished loading    //  We set a 1 second delay before calling 'createText'.    //  For some reason if we don't the browser cannot render the text the first time it's created.    active: function() { game.time.events.add(Phaser.Timer.SECOND, createText, this); },    //  The Google Fonts we want to load (specify as many as you like in the array)    google: {      families: ['Revalia']    }};function preload() {    //  Load the Google WebFont Loader script    game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');}var text = null;var grd;function create() {	game.stage.setBackgroundColor(0x2d2d2d);}function createText() {    text = game.add.text(game.world.centerX, game.world.centerY, "- phaser -\nrocking with\ngoogle web fonts");    text.anchor.setTo(0.5);    text.font = 'Revalia';    text.fontSize = 60;    //  x0, y0 - x1, y1    grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height);    grd.addColorStop(0, '#8ED6FF');       grd.addColorStop(1, '#004CB3');    text.fill = grd;    text.align = 'center';    text.stroke = '#000000';    text.strokeThickness = 2;    text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5);    text.inputEnabled = true;    text.input.enableDrag();    text.events.onInputOver.add(over, this);    text.events.onInputOut.add(out, this);}function out() {    text.fill = grd;}function over() {    text.fill = '#ff00ff';}

[x2l2]

i try to us this and  load diferent weight versions like this: 

 

    google: { families: [ 'Roboto:400,300,500,700,700italic,500italic,400italic,300italic:latin' ] }

 

but look like i can not use this :

label_title.fontWeight = '300';

or 

label_title.fontWeight = 'light';

is there a way or just i cant use it ?

[owen]

Been wondering about this.

Is it not possible to preload fonts (.ttf, .otf files etc) just like we preload graphics, in the preload() section?  (And therefore don't need any timer delay)

 

To be clear I want to use css3 font face and not google fonts.

[lewster32]

It's unfortunately not that simple - see this article: http://gamedev.stackexchange.com/questions/7244/html5-check-if-font-has-loaded

 

Also, this one has more on the subject and some possible solutions: http://stackoverflow.com/questions/6117553/external-font-on-html5-canvas

[kleepklep]

Ran into the same issue. The proper way to use the Google font weights as x2I2 wants to do is to include the weight in the font name (not by assigning a fontWeight) like so:
 
font: '700 35px Roboto'
 
Here's the code I'm using

In my HTML page

<script type="text/javascript">	WebFontConfig = {		google: { families: [ 'Raleway:400,500:latin', 'Rokkitt::latin' ] }	};	(function() {		var wf = document.createElement('script');		wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +			'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';		wf.type = 'text/javascript';		wf.async = 'true';		var s = document.getElementsByTagName('script')[0];		s.parentNode.insertBefore(wf, s);	})();</script>

In my Phaser code

var stat = game.add.text(876, 204, '1000 Points', {	font: '500 35px Raleway',	fill: '#ff0000',});

[salty-piggy]

This method has been working for me:

 

Put your css (link or inline both work) in the head of index.html before any of your scripts, and use the @import rule to load the fonts.

<!DOCTYPE html><html><head>  <title>My Game</title>  <link rel="stylesheet" href="style.css">  <script src="phaser.min.js"></script>  <script src="game.js"></script></head><body></body></html>

In your CSS:

@import url(http://fonts.googleapis.com/css?family=Lobster|Roboto);body {  font-family: Lobster, Roboto; // list any fonts you want to use in your game here, and you're good to go}

I've tested this in the latest versions of Chrome, Firefox, and Safari, and it seems to be working fine. I have yet to test it using @font-face with self-hosted fonts, however.

 

Hope it helps!

[swervo]

It does work with @font-face. Here's how:

 

In your CSS:

@font-face {  font-family: 'fontName';  src: url('fonts/fontName-bold.ttf') format('truetype');}body {    font-family: 'fontName';}.fontLoader {    position: absolute;    left: -1000px;}

In order to 'force' the font to load you need to have some body text, hence the .fontLoader class above if you want to hide it.

 

Once loaded you can just use it in your game as you would normally.

[staff0rd]

How do you correctly specify multiple sizes?  Say for example, I want to display some text at 32px and at another at 64px?

I have the following in my html;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">

However unless I have this in my CSS;

body {
    font-family: 'Roboto';
    font-size: 32px;
}

Then the following Phaser call displays a fallback font-face;

new Phaser.Text(this.game, 0, 0, "My text", { font: "32px Roboto", fill: 'white'} );

It looks like having any size in the new Phaser.Text() call that was not already assigned to body in css results in the expected font face not being displayed.  This means only one size can be displayed.

Any pointers on how I can fix this, or is it a limitation?

[staff0rd]

Gah, nevermind - this was being weird only because the browser had not yet requested the font when the new Phaser.Text() was called.  

I resolved this by making an invisible text call in the BootState, so by the time the real one was called the font was already present.

[Hulsen]

On 1/27/2016 at 5:05 AM, staff0rd said:

Gah, nevermind - this was being weird only because the browser had not yet requested the font when the new Phaser.Text() was called.  

I resolved this by making an invisible text call in the BootState, so by the time the real one was called the font was already present.

This solved my problem. I prefer this way better than waiting for 1s delay.
Thanks!