[Resolved] cc.LabelTTF doesn't use my font

cocos2d-x JavaScript
#2

Same problem here.
I think we need to use bitmap fonts.
the sample games like MoonWarriors is also using bitmap font

#3

I found a temporal solution until the cocos2d team finds a solution.

I uploaded my font to http://www.fontsquirrel.com/tools/webfont-generator and download the zip they send me.

I upload all the files they send me and put this line on my index.html

I’m currenlty working on web, and I’m not sure if this solution works on real devices with bindings.

#4

same problem over here, have you guys found another solution or submitted an issue ticket?

also, I notice in the console I’m getting the following:
“downloadable font: no supported format found (font-family:”FedraSansStd Normal" style:normal weight:normal stretch:normal src index:23)
source: (end of source list)"

#5

I was able to get custom TTF fonts working with this method: http://www.cocos2d-x.org/forums/19/topics/13022?r=13117#message-13117

#6

are there any performance impacts between custom TTF fonts and bitmap fonts? Is there a reason why Moon Warriors uses the latter format?

#7

found it _
http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:labels

#8

Hi Jose,

What is the browser you’re using?
We have tested custom font, it works well.

There are the steps:

  1. preload the custom font

    {fontName:“Thonburi”,
    src:[
    {src:“res/fonts/Thonburi.eot”, type:“embedded-opentype”},
    {src:“res/fonts/Thonburi.ttf”,type:“truetype”}
    ]
    },

note: because some browsers don’t support ttf format font, we recommend to export ttf format font to eot format.

  1. create a LabelTTF
    var aLabel = cc.LabelTTF.create("Some label", "Thonburi", 20);

Best regards
David

#9

Aha! I’ve been struggling with this for a while, and testing a bit after seeing your comment I’ve found that the problem is in how I was preloading the fonts, you see:

Writing this doesn’t work:
{fontName:"My Font", src:"my_font.ttf", type:"truetype"}

However, this works just fine:
{fontName:"My Font", src:[{src:"my_font.ttf", type:"truetype"}]}

So in the case of fonts you have to pass an array of sources rather than a single source (even if the array only contains one reference)?

1 Like
#10

I solved the problem using an stylesheet on my index.html

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

}
#11

Jose Antonio Andujar wrote:

I solved the problem using an stylesheet on my index.html

Yeah, but that’s rather troublesome isn’t it?

Have you tried the latest solution discussed?

#12

Yes, it works.

#13

I am just beginning to use Cocos2d, so apologies for re-opening this old conversation.

I am trying to use the method described above but it is not clear where I should put this:

{fontName:"My Font", src:[{src:"my_font.ttf", type:"truetype"}]}

I am currently using Cocos2d-JS v3.5

Thanks!

Font is not applied to LabelTTF
#14

How exactly is preloading fonts done in cocos2d-js?

#15

resource.js:

//load this
res = {
    font: {
                type: "font",
                name: "My_super_font",
                srcs: ["res/font.eot", "res/font.ttf"]
            }
}

Web platform :

  • index.html: add font in style

    < style >
    @font-face {
    font-family: 'My_super_font;
    font-style: normal;
    font-weight: 400;
    src: url(res/font.ttf) format(‘ttf’);
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    </ style >

  • code (js) : new cc.LabelTTF(“blabla”, “My_super_font”, 32);

Native platform :
code (js) : new cc.LabelTTF(“blabla”, “res/font.ttf”, 32);

1 Like
#16

Already worked that out.

#17

I tried following code
@font-face {
font-family: ‘BradBunR’;
font-style: normal;
src: url(‘res/font/BradBunR.ttf’) format(‘ttf’);
}
in style tag
and
new cc.LabelTTF(“blabla”, “BradBunR”, 32);

It’s neither working in my computer broswer nor in android broswer.
I am new to cococ2d-x js . Please guide me how to use custom font.

#18

I used the following code in my Resource.js file:

var res =
{
ArtifikaMedium_ttf: {type: “font”, name: “Artifika Medium”, srcs: [“res/Fonts/Artifika Medium.ttf”]},
CooperHeavy_ttf: {type: “font”, name: “Cooper-Heavy”, srcs: [“res/Fonts/Cooper-Heavy.ttf”]}
}

var getFontName = function(resource)
{
if (cc.sys.isNative)
{
return resource.srcs[0];
}
else
{
return resource.name;
}
}

And used the following code in MyLayer.js file:

var labelTitle = new cc.LabelTTF("Shop", getFontName(res.ArtifikaMedium_ttf), 60);
labelTitle.setPosition(this.winSize.width * 0.5, this.winSize.height * 0.7);
this.addChild(labelTitle, 10);

Its working properly on browsers. But on iOS platform its showing default font instead of the custom font. Does anybody know what I am missing here?

1 Like
#19

I’m having the same problem too :frowning:

I tried doing it just like @thomasjab said, but it’s only working in the browser

#20

You can see how I solved it here: What is the correct way to use a custom font in IOS?

#22

My problem got solved.
Issue was font i was using had some special characters in it like face of the person who created it which obviously were not detected as character in cocos2d.
Hope this help.