Using custom fonts in lists and text boxes in Construct 2

4

Stats

6,723 visits, 8,617 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 5 Nov, 2018. Last updated 19 Feb, 2019

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: 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.

  • 0 Comments

Want to leave a comment? Login or Register an account!