In the games I've made with Wade, I've always loaded custom fonts in the css then used them normally in the Wade App. So in style.css you would add something like this:

@font-face {    font-family: 'Arwin';    src: url('myfonts/arwin.eot');    src: url('myfonts/arwin.eot?#iefix') format('embedded-opentype'),    url('myfonts/arwin.woff') format('woff'),    url('myfonts/arwin.ttf') format('truetype'),    url('myfonts/arwin.svg#arwinregular') format('svg');    font-weight: normal;    font-style: normal;}

It's a bit annoying because you need to have the font in so many different formats (eof, ttf, woff, svg) to make sure that it works in all browsers. But it does work. Then you can do this

var textSprite = new TextSprite('Hello Arwin', '32px Arwin');

Yes I do this too, but there is problem with Chrome. It is timing problem: if you draw text before it is loaded, Chrome dont use it, it uses another font (maybe Arial) then replaces Arial with your font when finished loading. This dont work well in wade because wade dont redraw the text every frame, only when it changes or something on the same layer moves near the text.

Workaround is this: in init function create a text sprite with color "rgba(0,0,0,0)" so it is invisible, and use your custom font. This forces Chrome to load and update the font. The next time you use text sprite with custom font it will work in Chrome too.

Thanks for helping, I tried it and using a firefox browser I still get an Arial text on the sample game shooter.

*Edit:

This is the font in style.css

@font-face{    font-family: 'Freckle Face', 'cursive';    src: url('myFonts/FreckleFace-Regular.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

I only have a ttf which I downloaded from google web font.

Then in the shooter.js

this.init = function(){	wade.setMinScreenSize(320,480);	wade.setMaxScreenSize(320,480);	//main menu text	var clickText = new TextSprite('Click or tap to start','72x Freckle Face','red','center');	var clickToStart = new SceneObject(clickText);	wade.addSceneObject(clickToStart);	wade.app.onMouseDown = function()	{		wade.removeSceneObject(clickToStart);		wade.app.startGame();		wade.app.onMouseDown = 0;	};};

@Taddeus

As far as I can understand, is this is like what you mean?

var txtLoad = new TextSprite('12x Freckle Face','rgba(0,0,0,0');var clickText = new TextSprite('Click or tap to start','72x Freckle Face','red','center');var clickToStart = new SceneObject(clickText);wade.addSceneObject(clickToStart);

Yes, almost. Note that this is only problem with Chrome, not Firefox or other browsers.

You create txtLoad correctly, but you need draw it. Its better you do this as soon as possible, then wait a frame to draw more text that use the same font, like this

var txtLoad = new TextSprite('12x Freckle Face','rgba(0,0,0,0'));var chromeFix = new SceneObject(txtLoad);wade.addSceneObject(chromeFix);setTimeout(function() {   // the rest of your init function here}, 100);

I dont know if there is better way, this works for me. It is only problem with the first frame you draw text with custom font, and only in Chrome. If you draw text later in the game then no problems.

Finally, it is not good to use TTF only. If you want to choose only one, choose WOFF. TTF is not supported well.

Web fonts are a mess, very poor API. Not Wade's fault, it is the way they define the web standard. Look this MDN article for more info:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Thanks Taddeus, it is absolutely true that there is that problem with Chrome and that's a nice workaround. However it may be easier to just add a hidden div to your html file, and do everything normally in your App. So in index.html add this before the </body> tag:

<div style='display: none, font: 12px Freckle Face'>Fix for Chrome</div>

Also arwin, you are missing a p in your code. It's 12px, not 12x, which may be why you aren't seeing the font :)

I tried all this but the game still shows an Arial. I even used the font squirrel font generator to convert the ttf font to font svg and eot. Anyone here I can send my source to test at your end? Thanks!

Yeah feel free to send it to me via a private message or post it here, as you prefer. I can have a look tonight.

pm sent! thanks again.

Ok, I've replied to your PM and I've attached a working version, however I'll reply here just in case someone else has the same problem in the future.

I've changed a couple of things, but the main one is: the url parameter in your css must point to the full path of the font. If you have your font in a folder called myFonts, then you have to do

@font-face {    font-family: 'freckleface';    src: url('myFonts/freckleface.eot');    src: url('myFonts/freckleface.eot?#iefix') format('embedded-opentype'),         url('myFonts/freckleface.woff') format('woff'),         url('myFonts/freckleface.ttf') format('truetype'),         url('myFonts/freckleface.svg#freckleface') format('svg');    font-weight: normal;    font-style: normal;}

Secondly, the inline style for the div that I posted earlier had a syntax error or two :) The correct version is:

<div style='display: none; font: 48px freckleface;'>Fix for Chrome</div>

If you do this you don't need the workaround proposed by Taddeus, you can do everything normally in your Wade App.

I've also renamed your font to just 'freckleface' to avoid confusing the file name with the font family name... I think it's much easier if everything is called with exactly the same name, so you can't accidentally type in the wrong thing.

Yes it worked. Thanks Gio.

Hey Gio, I have run into this same issue. It works well on Editor and localhost on chrome, but on a heroku server the font does not display. I tried to use the hack you suggested and loaded a 'display-none' div with the font. But it does not work on server. The second scene has the font though

Here's my CSS and HTML

@font-face {    
    font-family: 'FatFrank-Regular';    
    src: url('/assets/fonts/FatFrank-Regular.eot');    
    src: url('/assets/fonts/FatFrank-Regular.woff');         
    src: url('/assets/fonts/FatFrank-Regular.ttf');
}

<div style="display: none; font: 48px FatFrank-Regular;">Fix for Chrome</div>

@prajwal.be.21 did you get it working?