Jump to content

Phaser with External Font (Tamil TTF)


JesusJoseph
 Share

Recommended Posts

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. 

project-structure.PNG

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...