Team_Q

Custom Font with Typescript

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)});

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.