• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Construct 2: Getting Custom Fonts To Work in CocoonJS

Gaming · January 5, 2015

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.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Lachlan
Lachlan
8 years ago

Kelson Bold is very nice and sleek.

0
dhoeke
dhoeke
8 years ago

Exactly what I was looking for, having the same issue right now in Construct 2 with CocoonJS. Thank you for this awesome article, finding it via Google just helped me a lot! 🙂

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz