Font is not applied to LabelTTF

cocos2d-x JavaScript
#1

Here is what I did:

1-> Download Amatic font from Fontsquirrel.
2-> Put the .ttf files into /res/fonts folder.
3-> Open the res.js and add the property to res object:

var res = {
    octagon_png: "res/octagon.png",
    HelloWorld_png : "res/HelloWorld.png",

    font_amatic_bold: "res/fonts/AmaticSC-Regular.ttf"
};

4-> Create a LabelTTF with the new font:

var helloLabel = new cc.LabelTTF("Match Scene", res.font_amatic_bold, 38);

Output doesn’t change. Still showing the label with the Arial font.

Am I missing something?

#2

Hi @onselakin,

Try to load .ttf file in resource.js file like:

   {
        type:"font",
        name:"AmaticSC-Regular",
        srcs:["res/fonts/AmaticSC-Regular.ttf", "res/fonts/AmaticSC-Regular.ttf"]
    },

While creating Label provide the name:
var helloLabel = new cc.LabelTTF(“Match Scene”, “AmaticSC-Regular”, 38);

Regards,
Gurudath

#3

Hey @Gurudath!

Thanks for the help but still no change. My code is exactly the same as yours now.

#4

Hi @onselakin,

I have checked Amatic-Bold.ttf font. I have checked in Chrome browser.
Working fine for me.

On what platform you are testing?

#5

Not on a browser :slight_smile: This is a mobile/desktop game.

#6

May i know how you are testing?
You are writing code using cocos2d-JS.
How you are testing it on desktop?

#7

I’m working on a Cocos2d-x Javascript project.

#8

Need help on this? No one tried this before?

#9

@onselakin, you’re saying that you’re not using a browser, so I’m assuming that are you compiling for native. In that case cocos works with searchPaths.

In your main.js there’s probably the following lines…

searchPaths.push(“res”);
searchPaths.push(“src”);

When cocos tries to load resources it tries to resolve paths relative to the searchpaths. So in case of the font the path should be

srcs:["/fonts/AmaticSC-Regular.ttf", “/fonts/AmaticSC-Regular.ttf”]

Hope that helps.

#10

@araker Thank you. I tried almost all of the combinations and still no luck. Tried with the “/” before the folder name, tried without it, moved the ttf file into the res folder to no avail. No errors, nothing.

#11

Also, I don’t have any searchPath registrations in my main.js under cc.game.onStart but all of the other resources work without problems. Please note that I haven’t changed anything on that file, it’s coming from the project template as is.

#12

If you don’t use the searchPaths you don’t have to change the paths. For me the solution from this topic worked.