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


#1

Hi,

I’m having problems with labels with .ttf files. I’m trying to use a label on cocos2d-html5 v2.1.4 with a custom ttf, and the label always use the same default font.

I’m preloading the label as shown.

@
var g_ressources = [
//bla,bla,bla

//fonts
{fontName:“CalvinItal”, src:“calvinital.ttf”, type:“truetype”}
];

And creating the label with
var label = cc.LabelTTF.create(“TEST”, “CalvinItal”, 30 ,cc.SizeZero(),cc.TEXT_ALIGNMENT_CENTER);
@

tested with code example, and doesn’t work either
@
{fontName:“Thonburi”,
src:[
{src:“res/fonts/Thonburi.eot”, type:“embedded-opentype”},
{src:“res/fonts/Thonburi.ttf”,type:“truetype”}]}
@

Any idea? or solution


#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)?


#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);


#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?


#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?