Team_Q Posted July 22, 2014 Share Posted July 22, 2014 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! Link to comment Share on other sites More sharing options...
lewster32 Posted July 23, 2014 Share Posted July 23, 2014 Should the font name not be 'Holtwood One SC' instead of just 'Holtwood'? Link to comment Share on other sites More sharing options...
Team_Q Posted July 23, 2014 Author Share Posted July 23, 2014 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. Link to comment Share on other sites More sharing options...
lewster32 Posted July 23, 2014 Share Posted July 23, 2014 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& Link to comment Share on other sites More sharing options...
Team_Q Posted July 23, 2014 Author Share Posted July 23, 2014 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. Link to comment Share on other sites More sharing options...
lewster32 Posted July 23, 2014 Share Posted July 23, 2014 If it's working then that's cool, no need to worry Link to comment Share on other sites More sharing options...
Eraph Posted July 28, 2015 Share Posted July 28, 2015 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! Link to comment Share on other sites More sharing options...
drhayes Posted July 28, 2015 Share Posted July 28, 2015 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. Link to comment Share on other sites More sharing options...
Eraph Posted July 29, 2015 Share Posted July 29, 2015 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! Link to comment Share on other sites More sharing options...
cloakedninjas Posted November 11, 2015 Share Posted November 11, 2015 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 --saveWhich will put in place the the .d.ts file allowing you to do the following in your preloaderWebFont.load(<WebFont.Config>{ google: { families: ['Raleway'] }, classes: false, active: this.startMainMenu.bind(this)}); jmp909, kikemx78 and Miezel 3 Link to comment Share on other sites More sharing options...
kikemx78 Posted June 13, 2016 Share Posted June 13, 2016 @cloakedninjas... It does works as expected...Thanx ! Link to comment Share on other sites More sharing options...
Fenopiù Posted December 6, 2017 Share Posted December 6, 2017 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 Link to comment Share on other sites More sharing options...
Recommended Posts