Hi guys,
I’m trying to use a font called LuckiestGuy.ttf on a Facebook Instant Game.
When I run from Cocos Creator everything is fine but when I deploy to Facebook Instant Games I get a weird behaviour.
From PC everything is fine but from Android the vertical align is off.
Here’s 2 screenshots:
I attached the font.
LuckiestGuy.zip (39.4 KB)
Could anyone help me to fix it?
Hi,
I fixed using this tool:
I just convert the ttf to ttx file, change the ascent to 2100 and convert it back to ttf.
I hope this can help other people with similar issue. 
I have same problem with TTF fonts, but it works some fonts sometime (yes that’s interesting point!). I have worked more than 2 hours and tried hundred different variants.
At last, I found a solution on macOS. If I add font to “Font Book” on macOS, the font doesn’t work in Cocos Creator v2.0.2.
I don’t know why! But I have solved my problem that way
Hi all,
We have the same problem even with CC 1.9n and this is really needed to be solved before our game release. The difference happens also with Chrome and Firefox. I’ve already tried megasoft78 solution but the ascent parameter doesnt change anything for me. If the devs could have a look at it it would be great because it’s really handicapping.
I have the same issue with all TTF fonts. It feels like it has something to do with if the font is installed on your system or not, but not 100% sure if this is the case.
This feels like a serious bug, since I can imagine that many people use .ttf fonts. Could we get an answer for a developer on how to create a workaround on this or what affects it to be misplaced?
@slackmoehrle
@jare
@huanxinyin
or anyone else from the Cocos Creator team. I’m sorry for tagging a lot of you, but this is a big problem!
Could you help figure this out or get the right people on this?
Working with non system fonts that are not bitmaps, in this case .ttf fonts in Cocos Creator is almost impossible. Exactly as @megasoft78 explained they get misplaced. I’ve been now trying to solve or even hack this somehow for two full days in a row now but I have no idea what Cocos Creator does to misplace them so badly.
I’ve tried everything from this post and searched the forums and tried pretty much anything I can think of, but since I don’t know why Cocos Creator misplaces them I have no clue how to continue.
Some screenshots to explain it, even though it is very straight forward:
In Editor:
When Running:
While running some fonts they might also be cut out if the node isn’t big enough because of the misplacement.
Again in Cocos Editor it looks good and promising:
Running or after build version:
(You can counter this by making the node bigger, but you have to manually adjust some guesses on how big the node should be for the misplaced font to fit)
Another example with another font. Here it also gets slightly misplaced in the editor, but much worse when running it.
In Editor:
Run or Build versions:
I cannot convert the fonts into bitmaps either because I need to support all kinds of languages, so one set of alphabet is not enough.
It’s important to notice that these misplacements aren’t always the case, if it were you could counter it by moving the label in Y-axis until you find the sweetspot, but since it isn’t for all devices, you cannot do this.
For a long time I was using these fonts without any misplacement, while some of my colleagues had the issue. Now It happens on pretty much for everyone and on any device, but it’s not on every device. Once it happens then it stays, so you cannot refresh several times and have one time that it aligns perfectly. It is very strange.
I understand if the fonts are some bad quality fonts that they might be messed up cause of the font, but for example Roboto is a high quality Google font (Google Fonts) that should not need any hacking to be working.
I’ve tested this in following Cocos Creator Versions:
1.10.2
2.0.5
2.1.0
Please help, fonts are a big deal of any game. Thank you so much for your time, I would really appreciate so much if you could help me with this!
Hi, all
This could be related to a fix that we merged into 2.1 dev branch:
It also got merged into v1.10-release branch.
The origin of the fix was that different browsers handle vertical alignment( ctx.textBaseline ) differently, only alphabetic works equally, so the solution is that we do TOP, MIDDLE, BOTTOM all based on alphabetic baseline with adjustment.
I’m not very sure whether it solves your issue, but I can explain how we do ttf rendering.
On the web, we don’t have much choice on font rendering, we can only render it on a offscreen canvas using canvas 2d context APIs, in which we will apply fillStyle, globalAlpha, textAlign, textBaseline, font (including font size, font family), lineJoin etc based on user setting. Then this canvas will be used as a texture and be rendered on WebGL Context.
Also, lineHeight, overflow setting will affect the font size before rendering the offscreen canvas.
@Ronsku I see you used SHRINK on overflow setting, that could affect the font size in runtime. And your label texture get cut off at top, which is really strange, it means canvas rendering is acting weird.
Please try our new fix and see what happens
Thank you for your quick response, I really appreciate it!
Does it mean that it is merged into the *-release-branch that it is also released into 1.10.2 and 2.1.0 versions that are available for grabbing online or do you need to use a custom Cocos Engine to get these changes?
I made a few tests to report to you with both Alphabet, upper and lowecase letters next to numbers in three different labels next to each other on the exact same Y-axis.
These tests are ran with Cocos Creator version 1.10.2
NOTE: Images are huge so copy the image link and open them in a new tab if it is unreadable through the forums.
First one is one default font and 3 .ttf fonts with Overflow: None:
Next one is Vertical Alignment that works strangely if you let the Label adjust its Node’s own size:
Next one is that different overflow’s doesn’t really affect the misplacements of the font:
Let me know if I can try out anything else or if I should somehow install a custom version of the Cocos Engine into my Cocos. in 2.1.0 version it is quite easy to set custom Engines I assume with the new properties setting, but I don’t know how to do it in 1.10.2 if the case is that I need to set custom engine for my cocos to get this fixed.
Thank you!
@pandamicro
It actually doesn’t matter if the font is a .ttf font or just regular system font “Arial”
In this example there is a system font “Arial” used and with 2 different browsers:
Chrome (not centered):
seems to be centered perfect if you compare top of “A” to bottom of “j” and “g”.
Edge:
Seems to be centered with uppercase letters but not matching “g” and “j” centering. Also cutting of the end of “j” and g".
I understand that fonts behave differently on different devices/operating systems/browsers, but what annoys me is that a few weeks ago I didn’t have this problems and everything was perfectly centered everywhere.
The font moves differently depending on the font itself. I noticed fonts that move up 12px / 100px font size, but others that move 16px / 100px font size, so there is no standard. I cannot find why it moves on a specific device and why it didn’t move before. I’m thinking about if the font is installed on the system, but that doesn’t seem to affect it either.
It is super hard to make fonts look good with perfect placements since they can be moving for some users all of a sudden 16px in Y-axis.
Wish I knew what is causing this
Any progress on this? I see that others also have this issue, like in this post as well:
https://discuss.cocos2d-x.org/t/cocos-creator-label-vertical-alignment-issue-on-mobile-devices/39431
It is really breaks your game for the users that experience this issues. I’ve tried everything in my power to make this work without any results 
I’m not sure if a game can be released while experiencing a bug like this.
Even though the final quality is obviously a little lower, maybe using bitmap fonts could be a way out of this problem. Is it a viable solution?
Unfortunately AFAIK there’s no release of CC that have mentioned fix so you have to use custom engine. Just copy engine form CC directory to some other place (it’s better to put it under version control) and then patching it manually. Also don’t forget npm install and gulp build build-html5 in engine directory. Then in CC you can target this custom version using settings menu. Unfortunately I was only able to configure it on per-user (as opposite to per-project) level. Don’t forget to perform this configuration on every developer and CI machine.
https://docs.cocos2d-x.org/creator/manual/en/advanced-topics/engine-customization.html
If you need 1.10.x version of the fix then you can find it here https://github.com/cocos-creator/engine/pull/3692
Hi @id_ilych and thank you for your response! Very sorry for my late response to this.
By having a custom CC engine in my project, how would that solve the ttf font placing issue that happens on some devices/browsers?
I’ve tried the latest version of 1.10, which is 1.10.2 and the issue is there and also the the latest 2.x version 2.1.0 and 2.0.8, this issue exists in every version.
If I make a custom build of the engine, what should I fix in the engine to solve this issue? If this issue is known why isn’t it fixed in the latest versions? It is quite make or break for games since the placement differs a lot :(.
@id_ilych I made a custom engine build, tried the ttf label positioning issue in both Development mode and after building, it has the exactly same problem, no difference.
What in the world is causing this @pandamicro @BigBear @slackmoehrle ?
I’m okay fixing this personally if you can guide me in any direction with the engine?
After looking into the engine I found these label relative files:
engine\cocos2d\core\renderer\utils\label\label-frame.js
engine\cocos2d\core\components\CCLabel.js
engine\cocos2d\core\renderer\utils\label\ttf.js
engine\cocos2d\core\renderer\canvas\renderers\label\ttf.js
engine\cocos2d\core\renderer\webgl\assemblers\label\ttf.js
engine\cocos2d\core\assets\CCTTFFont.js
/* Other label related files, but probably not causing this issue */
engine\cocos2d\core\assets\CCLabelAtlas.js
engine\cocos2d\core\components\CCLabelOutline.js
I just lack the experience in WebGL and how the engine is built to start trying to figure it out 
Thank you in advance
@Ronsku Hi. By “custom” I meant that you would have to take some engine version from CC distribution and then apply appropriate patch manually (https://github.com/cocos-creator/engine/pull/3664 for 2.x versions, and https://github.com/cocos-creator/engine/pull/3692 for 1.10.x). This fix seems to give the same output in the editor and the browsers (though I only tested it in desktop browsers).
@id_ilych You’re a hero! Thank you so much, it worked like a charm!
I saw that this was merged and thought that it was in the latest release, but it wasn’t for some reason?
Custom engine with your change did the trick.
You’re the best. HUGE THANK YOU! 
@pandamicro In what version of Cocos Creator are you thinking about including these fixes @id_ilych has provided for the .ttf fonts?
I have the recent version 2.0.9 and it is still not in this version. Any reason for not putting it in? It does has small flaws and works best when using “center/center” for vertical/horizontal alignment, but at least it is way better than the current engine without it.
I’m quite curious to know the reason why this doesn’t show up in releases?
I guess it is placed into cocos-creator:v2.1-release so next 2.1.x release? Do you have any public roadmap anywhere, like before?