Adding custom characters to your Font in Wonderland Engine

Hello Wonderland Engine developer!

In this tutorial, we will be adding icons to our custom font and then integrating the modified font into our Wonderland Engine project.

In one of the lastest updates to Wonderland Engine, we now have the feature to specify the characters that will be included in the font for the project.

Views -> Project Settings -> Rendering -> fontCharacters

Using custom fonts

Let’s start by opening up our project and checking out our font settings. By default, Wonderland Engine uses the font ‘DejaVuSans’ in every project you create. You can change it to any other .ttf font in your project. To do this, copy your font into your project and enter the relative path in the font field under the Rendering tab of the Project Settings.

For Archery Training, we use the font Akaya Telivigala by Vaishnavi Murthy and Juan Luis Blanco. After getting the .ttf file out of the zip, I create a subfolder named fonts/ in my project’s root folder. I then move the file into the folder and rename it to Akaya.ttf. Ithen enter the path fonts/Akaya.ttf in the font field under the Rendering settings of my project.

font field in Wonderland Editor

We can now use Akaya for text components in our project!

Next step: Adding icons to the font.

We need icons!

I have the following issue in my project currently: I want to create a button that toggles the leaderboards between the top players and between the players around user’s position on the leaderboards. In this case, using text will only confuse the user and an icon will do a much more better way of conveying the function of the button.

This is not the best way to convey anything

Let’s try to integrate 2 icons into our font: 1) a globe to display the top 10 players and 2) a user icon to indicate that we want the score of the user.

I chose the following icons for this:

1. Globe icon made by Freepik from www.flaticon.com
2. User icon made by Kiranshastry from www.flaticon.com

As these icons have an attribution license, I will also add them to the credits of the game.

Go ahead and use any .svg file you want for the fonts, I downloaded them to use in the next step.

FontForge and Inkscape

To edit our font, we FontForge, which is a free and open source font editor that lets us add the characters we want. Go ahead, download and install FontForge. After launching it, you will be prompted to open your font. Navigate to your project’s folder and open it. You will then see all the characters included in your font.

FontForge opened on Akaya Telivigala-Regular

You can skip these steps by importing your .svg directly into FontForge (by going into an empty font field, importing an svg and using FontForge’s transformation tools), but I prefer to use Inkscape, as it allows me to do changes and transform the icon more easily.

Before we can add our .svg files into our font, we will have to edit them first, as FontForge has some requirements for the .svg files. For this, I use Inkscape, which is a free vector art authoring tool.

I followed the following steps from this tutorial to get it working:

1) Open your .svg file in Inkscape

2) Open File -> Document Properties window

3) Set custom size to 1000 x 1000 (width x height) in pixel(px) units. Confirm by pressing enter. You will now have a larger canvas in Inkscape.

4) Drag a horizontal guide from the ruler on the top row by clicking on it with the mouse cursor and pullin it down onto the image board. This will create a horizontal line to use as a reference.

5) Double click on the line to open it’s settings. Set Y to 200 to set it as a baseline. Press OK.

6) Move and resize your icon to have its bottom above or on the line. You can use the handles on the icon (click on it) to transform it. I recommend holding down the ctrl key when resizing, this will preserve the aspect ratio of the icon. The size should be similar for each icon you use.

7) We are done! We can now save the image as an .svg file. To do this, go to File -> Save as… (Ctrl+Shift+S) and select plain SVG (*.svg) as the type. Name it anything you want and save it.

Now, back in FontForge, we are ready to import our .svg icon into our font. To do this, decide which characters will be using the icons. Ideally, select a character that is unused in your texts, for example I chose these two:

Remember the Unicode numbers

Now double click one of the fields. This will open up the space in FontForge’s editing window. Remember the unicode numbers for your characters, as you will use those for the text component later on! (Mine are 0199 and 0198).

Note: Unicode input depends on your input language, so you can use Websites like this one to copy and paste the character instead of using Alt+UNICODE (Windows only).

Go to File -> Import and navigate to your freshly exported .svg file(make sure to filter by SVG) and select it. You now have your icon in the font.

We have now successfully added our icons into our font! Now we only need one more step before we can export our font.

Select each icon and click on Element -> Add Extrema(Ctrl+Shift+X).

Now, go to File -> Generate Fonts…

Set font type to TrueType, select it’s path, name it and click on Generate. Click through the warnings and voila! Your font is ready to be integrated into the Wonderland Engine!

Back in Wonderland

Now that we have our font ready to go, we just have to setup the characters in the project settings. For this, copy and paste the characters (You can google the unicode and copy/paste it from there) into the fontCharacters field in your ProjectSettings.

If the Wonderland Editor’s font does not contain the characters, it will display them as question marks. This is normal, don’t panic!

You are done! Now create a text component and copy/paste the characters into the text field of your text component. You should now be seeing your icons as the characters of the font.

Thanks for reading!

You can find me over at Twitter under @ChisiVR and don’t forget to check out the game over at Construct Arcade!

Until next Time,

Florian Isikci