Webfonts not working

3ddy · April 4, 2016

Hello,

I did some searching, tried many solutions but none seems to work for me... I'm using Phaser 2.2.2.

Here is my index.html:

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:0px;
			margin:0px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

Then I'm trying to use it in my Office state in init function like that:

this.sheetText = game.add.text(380, 160, 'some text to display', {font: "14px Tangerine", fill: "#000000", align: "left"});

And it's not working, it is displaying some normal, default font... can somebody tell me what I'm doing wrong?

Thanks for help

drhayes · April 4, 2016

You're probably better off getting Phaser to handle the loading of the font for you. Check out this example: http://phaser.io/examples/v2/text/text-padding

3ddy · April 4, 2016

56 minutes ago, drhayes said:

You're probably better off getting Phaser to handle the loading of the font for you. Check out this example: http://phaser.io/examples/v2/text/text-padding

Thanks for answer, but still something seems wrong. So with that approach from example you posted I should have my index.html like that (no fonts loading etc.? ) :

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		body{
			background: #ffffff;
			padding:0px;
			margin:0px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

Then I move through my preload and intro state to office. In Office state I want to use somewhere some fancy font. Here is the code:

MyGame.office = function (game) {
    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, this.createText, this); },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }

};
};

MyGame.office.prototype = {
    init: function () {
        this.background = this.add.sprite(0, 0, 'some', 'somepng.png');
        
        this.createText();
        
    },
    
    createText: function() {
        var style = { font: "25px Arial", fill: "#000", align: "center" };
        var style2 = {font: "14px Tangerine", fill: "#000", align: "left"};
        this.sheetText = game.add.text(380, 160, 'What is AML?', style2);
        this.sheetText2 = game.add.text(380, 260, 'What is AML?', style);
    },
    
    create: function() {
        
    },
}

And it is still not working... any ideas why? Tried putting WebFontConfig in init function but nothing changed

drhayes · April 4, 2016

Did you put the script load in your preload? (You're not showing the state so I'm not sure)

3ddy · April 5, 2016

18 hours ago, drhayes said:

Did you put the script load in your preload? (You're not showing the state so I'm not sure)

You were right - I forgot to add it. Should it be in the same state where I use webfonts? Because when I put it in my preloader state and there were no errors, but font still not working. Next I moved this loading script to preload function in my Office state (the one where I want to use webfont) and I'm getting error

phaser.js:52102 Uncaught TypeError: Cannot read property 'apply' of undefined

The function I created in Office state:

preload: function() {
        //  Load the Google WebFont Loader script
        game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');  
    },

When I googled a bit that error I can see that most people have some problems with event timers. Is everything alright in this part? The error pops up about a second after everything is displayed.

init: function (avatar) {
        this.background = this.add.sprite(0, 0, 'aml_1', 'szukaj_warstwa_1.png');
        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, this.createText, this); },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }

};

        this.createText();

drhayes · April 5, 2016

Can you change the code to look like this?

MyGame.office = function (game) {
  var self = this;
  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, self.createText, self);
    },

    //  The Google Fonts we want to load (specify as many as you like in the array)
    google: {
      families: ['Tangerine']
    }
  };
};

Based on the error I think "this.createText" doesn't refer to anything inside your "active" function. "this" inside there is the "WebFontConfig" object, but you want it to be your "MyGame.office" state. Try the above, see if it works.

3ddy · April 5, 2016

Thanks for answer

I've tried placing code above in two places, in MyGame.office = function (game) { } and inside init function of MyGame.office.prototype = { } - in both cases I don't have error, but the font is not displayed properly...

Jem Kazama · April 5, 2016

I've heard that sometimes you have to use the font somewhere before it renders properly in phaser. Maybe try something like this?

<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:px;
			margin:px;
		}
		.fontPreload {
		  	font-family: 'Tangerine';
		  	position:absolute;
		  	left:-100px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<div class="fontPreload">.</div>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

3ddy · April 5, 2016

3 minutes ago, MysticJ said:

I've heard that sometimes you have to use the font somewhere before it renders properly in phaser. Maybe try something like this?


<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<style type="text/css">
		body{
			font-family: 'Tangerine';
			font-size: 32px;
			background: #ffffff;
			padding:px;
			margin:px;
		}
		.fontPreload {
		  	font-family: 'Tangerine';
		  	position:absolute;
		  	left:-100px;
		}
	</style>
	<script src="phaser.min.js"></script>
	 <script src = "js/preload.js"></script>
	 <script src = "js/intro.js"></script>
	 <script src = "js/office.js"></script>
	</head>
	<body>
		<div class="fontPreload">.</div>
		<script type="text/javascript">
			var game = new Phaser.Game(960, 540, 'PHASER.WEBGL');
			game.state.add('Preload', MyGame.preload)
			game.state.add('Intro', MyGame.intro);
			game.state.add('Office', MyGame.office);
			game.state.start('Preload');
		</script>
	</body>
</html>

Thanks, it solved my problem!

Also thanks to drhayes for your impact in my problem.

Jem Kazama · April 5, 2016

11 minutes ago, 3ddy said:

Thanks, it solved my problem!

Also thanks to drhayes for your impact in my problem.

Glad to help!

Arcanorum · April 5, 2016

A more elegant solution that I use is the WebFont loader. This all you need to add to the end of your HTML head element.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            // Put your fonts to load here.
            families: ['Passion+One::latin']
        }
    });
</script>

Sign In

Webfonts not working

Recommended Posts

3ddy

Link to comment

Share on other sites

drhayes

Link to comment

Share on other sites

3ddy

Link to comment

Share on other sites

drhayes

Link to comment

Share on other sites

3ddy

Link to comment

Share on other sites

drhayes

Link to comment

Share on other sites

3ddy

Link to comment

Share on other sites

Jem Kazama

Link to comment

Share on other sites

3ddy

Link to comment

Share on other sites

Jem Kazama

Link to comment

Share on other sites

Arcanorum

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity