How to use your own Web Fonts

Favourite 65 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.

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

8
Ashley 112.2k rep

Nice tutorial, didn't know about the online converter, thanks!

Tuesday, January 03, 2012 at 9:24:49 PM
0
gammabeam 12.5k rep

Wow... This will be quite handy!
Thanks Przemek!

Wednesday, January 04, 2012 at 11:56:03 AM
2
Przemek32767 14.0k rep

I'm glad you like my first tutorial. :)

Wednesday, January 04, 2012 at 1:52:45 PM
0
Kazan 2,722 rep

Could never get this to work. Do I need to upload the css file to somewhere other than dropbox?

Wednesday, January 25, 2012 at 4:20:51 PM
0
Przemek32767 14.0k rep

Comment by Kazan

Could never get this to work. Do I need to upload the css file to somewhere other than dropbox?
It should work on Dropbox too (just make sure it's somewhere within the Public folder). My game on Scirra Arcade fetches the font and the CSS file from Dropbox, for example. Firefox doesn't display the font correctly for some reason, but Google Chrome does.

Wednesday, January 25, 2012 at 11:44:27 PM
0
shinkan 14.7k rep

@Przemek32767 same here. Can't make it to work from Dropbox - using IE9 - google fonts work allright though.

Monday, February 06, 2012 at 2:11:03 AM
0
Przemek32767 14.0k rep

From what I observed, browsers other than Google Chrome do not seem to render Web Fonts correctly when the game and the font are hosted on different domains. Putting both my game and the font on Dropbox solved the problem, except the text was slightly shifted upwards on Firefox.

Monday, February 06, 2012 at 9:49:00 AM
0
Bicky 4,029 rep

Thanks for the tutorial.
Note that the [family] needs te be the same as the name defined inside the ttf/otf/woff file.

Monday, February 13, 2012 at 11:16:39 AM
0
Przemek32767 14.0k rep

Hey, everyone!

I noticed you can import Web Fonts right into your project, so I've rewritten the tutorial. It should be much easier now.

Monday, June 25, 2012 at 6:49:45 PM
0
sqiddster 26.4k rep

Nice!

That pretty much solves every font issue, then!

Saturday, July 21, 2012 at 10:29:44 PM
0
soybean 4,949 rep

Nice tutorial :). I wonder, would this work on mobile if we export it through PhoneGap? Anyone has any experience on this? Thanks!

Tuesday, July 24, 2012 at 8:16:18 AM
0
preetam 2,114 rep

hi,
i tried this tutorial but it seems it is not working for me, i imported .woff and .css file and created a start layout event, but still cant see the custom font, the browser is still showing the default arial,

Plz Help

Friday, August 24, 2012 at 12:59:28 PM
2
Przemek32767 14.0k rep

Comment by preetam

hi, i tried this tutorial but it seems it is not working for me, i imported .woff and .css file and created a start layout event, but still cant see the custom font, the browser is still showing the default arial,

Plz Help
I'm not sure what is wrong, but maybe the CSS file is not correctly configured. Can you post your project so I can look into it?

Friday, August 24, 2012 at 7:27:42 PM
0
preetam 2,114 rep
Saturday, August 25, 2012 at 6:58:23 AM
0
preetam 2,114 rep

something is wrong, the file name last part is

Simple(percent twenty(in numeric))Menu.capx

Saturday, August 25, 2012 at 7:12:31 AM

Leave a comment

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