JesusJoseph Posted September 26, 2016 Share Posted September 26, 2016 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. tamil-bible-webfont.eot tamil-bible-webfont.svg tamil-bible-webfont.tff 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 More sharing options...
3ddy Posted September 26, 2016 Share Posted September 26, 2016 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 1 Link to comment Share on other sites More sharing options...
JesusJoseph Posted September 26, 2016 Author Share Posted September 26, 2016 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'; } Link to comment Share on other sites More sharing options...
3ddy Posted September 26, 2016 Share Posted September 26, 2016 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 1 Link to comment Share on other sites More sharing options...
JesusJoseph Posted September 27, 2016 Author Share Posted September 27, 2016 GREAT Its working correctly after I add some delay. Thanks Link to comment Share on other sites More sharing options...
3ddy Posted September 27, 2016 Share Posted September 27, 2016 You can use that delay as 'loading screen' maybe someone will come with better solution. Link to comment Share on other sites More sharing options...
Recommended Posts