Using Any Fonts In Your Project

1

Stats

14,261 visits, 21,269 views

Tools

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 12 May, 2013. Last updated 19 Feb, 2019

Introduction

I faced a LOT of difficulties working with fonts with C2. After some time hitting my head against the wall, and researching the tutorials and posts regarding this matter, I (sort of) developed this method, wich I think it is the best available so far. I didn't tested it yet for mobile systems like iOS or Android. So i can only guarantee that it works for web.

1- Choose your font

First thing of all, we need to select a nice font for our game. Be sure to read the terms of usage, and check if the font designer allows its creation being used by this kind of work.

2- Getting the right files

Now we will use the Fontsquirrel's Webfont Generator - fontsquirrel.com/tools/webfont-generator - it will provides us the files we need. Also, this site have a nice variety of free to use fonts. take a look if you're in need!

Leave the default option (Optimal) selected. Mark the checkbox and click the "Add Font" button. You can pick more than one font if you want. All of them will be included in a single .css file.

After a moment, a blue "Download your kit" button will appear at the lower right part of the Generator box. Click it to generate a .zip file that will be downloaded instantly.

3-Extract the files

Now Open the .zip file that you just downloaded. We'll need the files with the following extensions: .eot .svg .woff .ttf and the .css file.

Select those files from the zip and extract them at the place that suits you better.

4- Import to the project

Now let´s go to the Construct2 window. At the Projects panel, right-click the "Files" folder, select the "Import Files" option, and select the files you just extracted.

5- Create the use web font events

We now have added our font(s) to our project. Before we start creating the events that will make our game read the fonts, I recommend creating the folder where your game will be hosted (At your Public Folder at dropbox, or somewhere at your Google Drive, for example)

By default the fonts are added to the root folder of the game.

Now, let's create our event: Select System => On Start of Layout.

Then, select a text object to set the font.

Select "Set Web Font"

Now we have two fields to fill. The first one is the font name. It MUST be the same name written in the .css file. The CSS URL is [the location where your font will be] / [cssfile].css

With all set we now can export our project to upload it to the place we chose.

If you want, you can make a little test to see if Construct2 is trying to read your font. By default, if the font selected is not found, it will load any other font available. In my case I was using a sans-serif font, and it loaded a serif font. Indicating that at least the code is working fine.

6- Export your game

Click at the cogwheel icon at the upper left portion of the screen and select "Export Project".

Export your project as HTML5.

7- Upload to Dropbox / Google Drive

Upload your game at the hosting service you used to set the url that the game will read to set the fonts. Now you can test it!

P.S.: Unfortunately, usually it takes some time for the game read the fonts properly, depending where you hosted the game. In my case, hosting it at Google Drive, took me some seconds. At Gamejolt it reads instantly. I recommend creating an event sheet dedicated to load the fonts, and including it when needed.

If you still have any doubts or/and suggestions, feel free to contact me!

And if you want to see the result of this tutorial, you can play my game through this link: Tinysaur

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Hi! I can't find the action "Set Web Font" anymore, has it been deprecated? How can I set a font now?