Construct 2: Getting Custom Fonts To Work in CocoonJS

Recently whilst putting the finishing touches on my game using Construct 2 I ran into an issue using custom web fonts and the CocoonJS plugin for Construct 2.

I was trying to use web fonts which as it turns out, are not supported in CocoonJS. I didn’t want to create a sprite font as I am not a fan of their large file size and the fact most sprite fonts I have tried look horrible on retina displays.

This is a bit of a multi-step process to get them to work, but it isn’t difficult.

First, you need to obtain a “ttf” version of your font. If it is an otf or other format, you need to convert it using a free online converter or equivelent to make it a truetype font. I tested otf fonts and they are not detected by CocoonJS.

Once you have your ttf font, you want to now load it up using a font inspector (in Windows just double click the font to bring up the preview). Take note of the font name. The way it is spelled, etc.

In my instance I was using the Kelson Bold font. However, inspecting it shows that the font is just called Kelson, so what I did was renamed the file to “Kelson.ttf” matching the case. While I don’t think this is important, I did read somewhere (a while back) about needing to name fonts the same case for the file name for better compatibility/

In your Construct 2 project you now want to create a sub-folder within “Files” called “fonts” all lowercase. Then right click on it and import the font you renamed into the folder.

Now you have your font imported, you want to apply it to your text by going into your events sheet and choosing, “Set font face” and NOT “Set web font” – in the popup you want to enter the name of the font (and choose your weight if needed). You need to ensure the case of the name is exactly the same as what the preview said your font was called. In my instance again, I entered “Kelson”

Then save your project, export your CocoonJS zip file and bring up your launcher and then you should see your custom fonts (which load faster than web fonts anyway). Bringing up the console output in the CocoonJS launcher should show the custom font being loaded automatically.