How to use your own Web Fonts

Favourite 125 favourites
Tutorial written by Przemek32767Originally published on 3rd, January 2012 - 7 revisions

Introduction

Construct 2 Release 74 introduced the ability to use Web Fonts in your projects. This allows you to add custom fonts to your games without having your players install them on your computer. To learn more about this feature, read Ashley's tutorial on Web Fonts in Construct 2. Ashley's tutorial focuses on fonts from Google Web Fonts, but if you want to supply your own font, my tutorial will help you. Best of all, Web Fonts can be used in the Free Edition of Construct 2.

Respect the licenses!

Remember to read the font's license before you use it in your project! Not all fonts are free to use. Font authors may want something in return if you use their fonts. This is especially important if you are creating a commercial game.

Finding a font

Web Font format support in different browsers varies. Fortunately, there are online converters that can convert your font so that it should work anywhere. One converter I recommend is Font Squrrel's @font-face Kit Generator. In this tutorial we'll use a Team Fortress 2 font. Get a font file you want to convert and head over to the Font Squrrel's generator page. It looks like this:Font Squirrel page


Click the Add Fonts button and choose your font. The default setting is "optimal" and this is what you should use (you can also fine-tune your settings by switching to "expert"). Check the Yes, the fonts I'm uploading are legally eligible for web embedding box (again, remember about the font's license!). Once you are ready to go, click the Download Your Kit button. Wait a moment and you will be prompted to download your converted fonts. After you download the .zip file, open it. The only files you need are .eot, .svg, .ttf and .woff font files as well as the stylesheet.css file (you can rename the .css file to something else if you want). Extract those and launch Construct 2.

Adding a Web Font to your game

After you launch Construct 2, start a new project or open an existing one. Now you need to import the font files and the .css file to your project. To do this, right-click the Files folder in the Projects panel and choose Import files (you can pick multiple files at the same time).Imported files
Then create a text object.Some text
Now go to the event sheet and create an On start of layout event. Add a Set web font action for the text object. The family name can be found in the .css file, following the "font-family:" text (in our case, it's tf2_buildtf2_build):The CSS file


The CSS URL parameter should be the name of the .css file ("stylesheet.css" or whatever you renamed it to). This is the complete event:
Open full size image

Alright, time to preview your project. This is what you should get:The result of the tutorial
Thank you for reading. Good luck with your game!

Additional notes

Web Fonts in text boxes

Once you set a Web Font in any Text object, you can set one in a text box using a Set CSS style action. Type font-family in the Property name field and the family name from the CSS file in the Value field.

A workaround to Web Fonts failing to load

Sometimes, the Web Font will not load when the game is started and the text will use a default font until the layout is changed. One of the possible workarounds is to create a text object instance somewhere out of sight using events (you can create a separate Text object type just for this purpose), set the Web Font for it and destroy it after a 0.1 second delay (using a Wait action). Basically, the event should be similar to this one:A workaround to the Web Font not loading when the game is started


The text will be very briefly displayed using a default font before changing to a Web Font, but this will not happen again for the rest of the game.

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!

Comments

1
codefiend 1,284 rep

Awesome tutorial! Very easy to implement. Thanks mate!

Tuesday, October 15, 2013 at 5:23:58 PM
1
mrnannings 3,508 rep

Very well explained! Thank you!

Sunday, March 09, 2014 at 2:02:49 PM
1
krish 5,662 rep

Was helpful :) Thanks!

Wasn't able to use that workaround for failing webfont loads though.
It still does show old font once.

Friday, July 11, 2014 at 12:14:28 PM
0
TheoClarke 236 rep

Thanks for this tut, I've used this method this week in one of my browser game projects. So far I've only seen it in preview mode and it displays fine. So far, so good!

Monday, August 08, 2016 at 6:39:24 PM
0
irbis 6,482 rep
>
quoted from Przemek32767

1. Does this still works?
2. Does it work for Mobiles (Android)
3. Does it work for NodeKit?

Sunday, May 28, 2017 at 9:39:19 PM
0
Unconnected 12.8k rep

I recently reset my OS and my "Set Web Fonts" was not working when I ran my project. I found out it was reading from my Fonts on my OS. Putting 'Wait 1 Second" or even 2 seconds instead of creating text and deleting it seems more effective. I think what is happening is the file is trying to be read before the system has a chance to initialize the web font file. Creating a text and then deleting it wasn't working for me until I increased the wait time a bit.

Monday, September 11, 2017 at 12:06:00 PM
0
darkjant 447 rep

This worked for me, I was able to include my font after converting to web

Thursday, October 19, 2017 at 2:45:31 PM

Leave a comment

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