Jump to content

Phaser with External Font (Tamil TTF)


Recommended Posts


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. 


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"); }
			background: #000000;
			.fontPreload {
		  	font-family: 'SlimJim';

and then in body

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


Link to comment
Share on other sites


  • Recently Browsing   0 members

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