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
mineet 7,086 rep

thanks this as been useful

Saturday, March 23, 2013 at 3:18:22 AM
1
philx 4,487 rep

Do you know it this works for .otf Files in iOS ?

Monday, March 25, 2013 at 5:36:50 PM
1
SonicMK 1,636 rep

this is not working for me in Chrome. It works in all other browsers. in my .css file i include all types: woff, ttf, svg, eot. i know im calling everything ok otherwise the font wouldn't work on firefox or ie either. just not working on chrome. if anyone had a similar issue i would really appreciate some help on this.

Saturday, March 30, 2013 at 6:25:00 PM
1
Rogalog 908 rep

I'm having the same problem with Chrome. It works when I try it on Firefox, but not on Chrome. Can anyone give any insight on how to resolve this problem?

Thursday, April 04, 2013 at 2:40:52 PM
1
wretchedshark 3,210 rep

If you can put a "preloader" in before you use the font it will work in chrome. By preloader I mean a text box off screen in a layout before the font appears, with the text box set to load the webfont. Then in the layout you want with it setting the webfont, it should work.

Does anyone have a solution for the fonts displaying different in different browsers?

Friday, April 05, 2013 at 8:21:36 PM
1
Rogalog 908 rep

Thanks Wretchedshark, that helped a lot. However, for some reason, it takes a few seconds on the layout which I want the custom font visible to change from the default font to the custom font? Is there anyway to make it instant on start of layout?

Tuesday, April 09, 2013 at 4:02:15 PM
1
pcfernandesjr 3,962 rep

Followed the tutorial step by step, this just doesn't work in C2 =(

Thursday, April 25, 2013 at 1:03:56 PM
2
pcfernandesjr 3,962 rep

OK guys! For those who are yet struggling with this issue:

An important step omitted in the tutorial is that you must turn off the Enable WebGL at Project Settings.

But there is other way for those who need to keep the WebGL active:

At the CSS URL field, get the link from your CSS file hosted at Dropbox/Google Drive and paste it there.

It should work either way, I tested both and worked fine with me.

I hope a could be of any help!

Thursday, April 25, 2013 at 3:46:55 PM
1
Phobos002 5,285 rep

A quick answer to people who cannot get this to work in C2:

The font cannot load at the start of the layout. You must add a small delay to loading it for it to work!

Also, thank you to Przemek for making the tutorial! ;)

Saturday, May 11, 2013 at 4:18:40 AM
1
taltal 5,227 rep

thanks a lot!!! realy helping and you make it simple!!

Tuesday, May 28, 2013 at 9:06:29 PM
1
taltal 5,227 rep

@Przemek32767, do you know if the squirl generator works for Hebrew fonts?

Tuesday, May 28, 2013 at 10:28:15 PM
1
gikdew 1,026 rep

you are AWESOME

Sunday, August 25, 2013 at 10:28:37 PM
1
Opender 357 rep

The workaround did the trick for me.
Any way to get this working on Windows Phone?
Thank you!

Tuesday, September 10, 2013 at 1:45:04 PM
1
jobel 16.7k rep

I have 2 text objects using the same WebFont.. one works the other is in Arial no matter what I do.. or how long I wait..

Wednesday, September 18, 2013 at 2:27:51 AM
1
divaweb 2,684 rep

Much appreciated tutorial. Many thanks :)

Wednesday, September 25, 2013 at 10:59:49 PM

Leave a comment

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