[Problem Solved!] CocoonJS fonts on Android/iOS

Hi there, everybody.

Yesterday a kind friend of mine helped test my game (I'll put it on the Scirra Arcade as soon as it's ready, see attached screenshot!) and I noticed a small thing (maybe a bug?) about the Construct 2/CocoonJS font compatibility, which is:

* The font name you use in the 'Event Sheet' of any layout of your game/application must be written in small caps only - somehow the Android version of CocoonJS will sort out Caps in the font filename, but not the iOS version, and the result will be the iPhone/iPad defaulting to the Arial-like system font.

As further help, the steps needed to use any font you wish on Android/iPhone apps through CocoonJS are:

1) Put the font file (for example "Font Name.ttf") in the Files folder of your project (you can do it directly from Construct 2 'Projects' Tab)

2) In the Event Sheets of your project use the function 'Sent Font Face to...' on any of your Text objects, and set the font name to the 'font name' you adopted. No need to put the '.ttf' in there, but it has to be written in small caps, or it won't work on iPhones.

3) Compile on Construct 2, and test on CocoonJS Launcher

4) Be merry! ^_^

<img src="http://s23.postimg.org/gjdgyanh5/Xagonade_Screenshot.png" border="0" />

Thanks for sharing :). I notice you're referring to 'Set Font Face' and not 'Set Web Font'. Out of curiosity, does CocoonJS only support 'Set Font Face' and not webfonts? I'm asking because I'd like to know what's required for best portability. Say, I'm exporting to HTML5, then I'd use webfonts, but if I want to export to CocoonJS then I'll need to modify all 'Set Web Font' to 'Set Font Face'?

Hi Soybean! I still didn't try the Web Fonts functionality, and frankly think that it's a risk to "outsource" a part of your code to a remote server location, which does rely on your users always having an Internet connection and the server not having a downtime.

Most fonts will not take more than 50k-100k, so it's better to just put it into the project file.

If you're still adamant to use Web Fonts, I think Ashley did a very good tutorial about implementing them. ^___^

Yeah, fortunately you can also 'embed' WebFonts in the same way as importing TTF files. So no need to access internet to use the webfonts. Another good thing is, beside webfont formats (.eot, .svg, .woff), there is also .ttf included in webfont kits so I guess now is just: does CocoonJS work well if we use 'Set Web Font' instead of 'Set Font Face'. :)

That's cool stuff, bro. Construct 2 rocks! ^___^

Nice post... I did not even know you could implement a font in your project till I saw your post, how does it work exactly?

Thx for sharing! :D

WizLore

here is a couple tutorials on Web-fonts:

https://www.scirra.com/tutorials/237/how-to-use-your-own-web-fonts by Przemek32767

https://www.scirra.com/tutorials/236/using-web-fonts-in-the-text-object by Ashley

Or Sprite Fonts tutorial (shameless plug) by me.

https://www.scirra.com/tutorials/629/sprite-fonts-the-how-what-when-where

Thanks — This helped me a lot!

Should this solution also work on preview? Because I followed the steps, but the small default font still shows on the iOS device...

<img src="smileys/smiley1.gif" border="0" align="middle" />

Should this solution also work on preview? Because I followed the steps, but the small default font still shows on the iOS device...

I did all steps you've mentioned, but i still can't use added fonts with CocoonJS. Always the default font will be shown.. Has anyone ideas?

I think I ended up using webfonts or spritefonts for iOS devices. I believe I never got the set font functionality to work on that project.

This doesn't work anymore on CocoonJS for some reason. Anyone knows a workaround?