Translations

Know another language? Translate this tutorial!

Using custom fonts in lists and text boxes in Construct 2

Favourite 0 favourites
Tutorial written by adventuristOriginally published on 5th, November 2018

Introduction

If you have been following tutorials on how to add a custom font to a text object with the "set web font" action and are wondering how you can do so with a list or a text box but noticed that option is missing, then you've come to the right place.

Step 1

To start you have to have your font available in your games project files as well as have a text object in your layout that uses this font. The reason you need a text object that uses the font (even if you don't really have a need for a text object), is because it loads the font into your game and can be re-used afterwards by other text-based objects as well.

To do this, you can follow this tutorial: https://www.scirra.com/tutorials/237/how-to-use-your-own-web-fonts

If you have already done this you can skip to step 2.

In my example, I want to use the font "vt323" from Google Fonts, so in my games file folder, the font files looks like this:
I have then added a text object that is empty and placed it outside of the layout and set it to use the font, like this:


I set the font at start of layout so its available from the start.

Step 2

Now that the font has been loaded into the game (since it's being used by the text object we created), we can now refer to this font in our list or text box objects by using the action "set CSS style". So in the first field you enter: "font-family" and in the second you enter the name of the font (as specified in the stylesheet).
That's it really. It should work now. :)

If you have any questions about it or think this tutorial was helpful, you can leave a comment below.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.