Custom Font with Typescript

[Team_Q]

Hey Crew,

I'm trying to implement a custom font, I'm using Phaser through typescript, but I can't seem to get it to function correctly.

I've checked the phaser examples, unfortunately, as I'm both new to web dev and Typescript, I'm not sure how to convert that info into my game.

I've tried googling around and there aren't any examples that I've found that deal specficially with typescript, phaser and fonts.

 

I tried adding this:
 

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

into my html,
and referring to it with this:
 

 var style = { font: "30px Holtwood", fill: "#ff0044", align: "center" };

But I don't know if I'm missing something? Otherwise my text shows up, it's just default font.

Thanks!

[lewster32]

Should the font name not be 'Holtwood One SC' instead of just 'Holtwood'?

[Team_Q]

You are correct!

I needed to throw up some spaces.

 

var style = { font: "40px Holtwood One SC", fill: "#000000", align: "center" };

Solved my problem.

Now hopefully I've set up my loading correctly.

[lewster32]

I'm not sure if this will help, but the official example does this slightly differently, using the Google Webfont JavaScript API to ensure it loads correctly:

 

http://examples.phaser.io/_site/view_full.html?d=text&f=google%20webfonts.js&t=google%20webfonts&phaser_version=v2.0.7&

[Team_Q]

I tried to incorporate that, but I have no clue where to put 'WebFontConfig' in my project.

Right now it seems to load OK. I have to push it up to my webserver and check online that I'm creating the window correctly so that the fonts load first, but locally it's coming off without a hitch.

[lewster32]

If it's working then that's cool, no need to worry

[Eraph]

I'd like to reopen this as I'm trying to do it the "right" way using TypeScript.

 

I have a preloader class starting with the following:

module Game {    export class Preloader extends Phaser.State {        //  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 () { this.game.time.events.add(Phaser.Timer.SECOND, this.setUpLoaderText, this); },            //  The Google Fonts we want to load (specify as many as you like in the array)            google: {                families: ['Orbitron::latin']            }        };

In the preload method I have this:

this.game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');

And finally, in the setupLoaderText method I have this:

setUpLoaderText()        {            this.loadingText = this.game.add.text(this.screenCentre.x - 150, this.screenCentre.y + 16, 'LOADING', this.textStyle);            this.loadingText.font = 'Orbitron::latin';            this.loadingText.setTextBounds(0, 0, 300, 300);            this.loadingText.padding.setTo(0, 0);        }

I put a breakpoint in that last method and it never loads. IE developer tools shows me that the response from the Google webfonts call is successful and I can see the contents of the .js file. So I think I'm at the same point as Team_Q, where I'm not convinced that the WebFontConfig object is in the right place for the Google script to find. Any ideas where it should be?

 

Cheers!

[drhayes]

I don't know TypeScript, but are you sure that "WebFontConfig" variable is global? You don't need to preface it with "window" or something, in TypeScript? Are you seeing Orbitron get loaded?

 

EDIT: Er, I understand now that I've basically restated your question. Sorry about that.

[Eraph]

Some progress! The first thing to do is create an interface that extends the Window object:

module Game{    export interface GameWindow extends Window    {        game: Phaser.Game;    }}

In app.ts where I instantiate the game, I assign the game object to the window so that it is accessible anywhere:

window.onload = () =>{    var game = new Game.Game();    (<Game.GameWindow>window).game = game;};

Now, the WebFontConfig definition is set in the preload function of the preloader:

preload()        {            //  The Google WebFont Loader will look for this object, so create it before loading the script.            window['WebFontConfig'] = {};            window['WebFontConfig'].active = () => { (<GameWindow>window).game.time.events.add(Phaser.Timer.SECOND, this.setUpLoaderText, this); };            window['WebFontConfig'].google = { families: ['Orbitron::latin'] };

I can see the font being loaded now, and the dynamically loaded CSS file shows the following:

@font-face {  font-family: 'Orbitron';  font-style: normal;  font-weight: 400;  src: local('Orbitron-Light'), local('Orbitron-Regular'), url(http://fonts.gstatic.com/s/orbitron/v6/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff) format('woff');}

So while I'm calling for Orbitron::latin, the font name is still Orbitron. Set the font and go, happy days!

[cloakedninjas]

A little late to the discussion, but you don't need to forge an interface like that - there's a repo of Typescript definitions you can use called DefinitelyTyped - https://www.npmjs.com/package/tsd

 

Once you've installed it, globally:

tsd install webfontloader --save

Which will put in place the the .d.ts file allowing you to do the following in your preloader

WebFont.load(<WebFont.Config>{    google: {        families: ['Raleway']    },    classes: false,    active: this.startMainMenu.bind(this)});

[kikemx78]

@cloakedninjas...

It does works as expected...Thanx !

[Fenopiù]

On 11/11/2015 at 6:44 PM, cloakedninjas said:

A little late to the discussion, but you don't need to forge an interface like that - there's a repo of Typescript definitions you can use called DefinitelyTyped - https://www.npmjs.com/package/tsd

 

Once you've installed it, globally:

tsd install webfontloader --save

 

Now it give this as a result:

tsd install webfontloader --save

>> zero results