Cocos2d-js: How to use a custom ttf font on android devices?

Question

I use following code to display a custom ttf font:

ml.score = cc.LabelTTF.create(ml.totalPoints.toString(), "fonts/American Typewriter.ttf", 60);
ml.score.setPosition(ml.size.width/2,BS*0.6);
ml.score.retain();
ml.score.setColor(cc.color(200,160,70));
ml.scoreBar.addChild(ml.score, 5);  

In Android the font is not displayed. In Chrome / Firefox browsers it is.

I'm using cocos2d-js 30RC.

Wat?

Answer 1

I made a mistake. The file name was wrong. It should be

ml.score = cc.LabelTTF.create(ml.totalPoints.toString(), "res/fonts/American Typewriter.ttf", 60);

Otherwise the code works fine. (shame ...)

Answer 2

Michael's answer works on my Android, but does not work in my browser.

I could not find a multi-purpose method, but adding this in the head of index.html worked for my browser:

<style>
@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    src: local('Lobster'), url(res/Lobster.ttf) format('woff');
}
</style>

with this in your js:

var titleLabel = new cc.LabelTTF("Hello World", "Lobster", 72);

Since this method only works in my browser, and the other method only works on my phone, I might need to come up with a toggle.