Phaser with External Font (Tamil TTF)

[JesusJoseph]

Hi,

I am trying to set an external font (ttf) to a phaser text for the whole weekend but the font is not changing. I am also attaching the project structure.

Can someone please give some idea or suggestions on this issue. Thanks

I did the below steps.

Step 1: Convert the ttf font to web font using some online tool.

Step 2: Add the below contents to a external css file and insert it inside the index.html

@font-face {
    font-family: 'tamil-bibleplain';
    src: url('../fonts/tamil-bible-webfont.eot');
    src: url('../fonts/tamil-bible-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/tamil-bible-webfont.woff') format('woff'),
         url('../fonts/tamil-bible-webfont.ttf') format('truetype'),
         url('../fonts/tamil-bible-webfont.svg#tamil-bibleplain') format('svg');
    font-weight: normal;
    font-style: normal;

}

Step 3: Inside the font directory iI add the below 4 files.

1. tamil-bible-webfont.eot
2. tamil-bible-webfont.svg
3. tamil-bible-webfont.tff
4. tamil-bible-webfont.woff

Step 4:Add the font to the text in the js file as below

var titleText = me.game.add.text(100, 5, "Jump & Go!", {font: '20px tamil-bibleplain', fill: '#000'});
titleText.stroke = "#00AAAA";
titleText.strokeThickness = 6;
titleText.setShadow(2, 2, "#333333", 2, true, false);
titleText.font = 'tamil-bibleplain';

 

This is the project structure. 

[3ddy]

Hello, try to preload the font before using it in-game (just write some dot not visible on the screen before creating Phaser game). I use the code below:

 

<style type="text/css">
		@font-face { font-family: 'SlimJim'; src: url('assets/slim-jim/SlimJim.ttf') format("truetype"); }
		body{
			background: #000000;
			padding:0px;
			margin:0px;
		}
			.fontPreload {
		  	font-family: 'SlimJim';
		  	position:absolute;
		  	left:-100px;
		}
	</style>

and then in body
 

<div class="fontPreload">.</div>

 

[JesusJoseph]

Thank You 3ddy. That works BUT only second-time refresh.

I think First time the font is not loaded correctly. 

Is there is a way i can load the Font from my PreLoad.js file  before my home screen loaded?

Just added the below line in my external CSS file

.fontPreload {
    font-family: 'tamil-bibleplain';
}

[3ddy]

Are you trying to use that font in the beginning of body section? If yes and it still don't work maybe your game is launching faster than browser loading font - try to make some delay before using font ingame

[JesusJoseph]

GREAT 

Its working correctly after I add some delay.

 

Thanks

[3ddy]

You can use that delay as 'loading screen'  maybe someone will come with better solution.