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
preetam 2,308 rep

Thnx fo replying Prezemek, the problem with the file link is the space between the name i guess,here is an example of what i m trying to do,

http://dl.dropbox.com/u/99633348/SimpleMenu.capx

Sunday, August 26, 2012 at 6:40:53 AM
1
Przemek32767 24.1k rep

Hi preetam,

I'm sorry, but I couldn't determine what's wrong. One line in the CSS file is wrong ("src: local('ICE_AGE'), url('fonts.woff') format('woff');" should be replaced with "src: local('ICE_AGE'), url('ICE_AGE.woff') format('woff');"), but fixing it didn't solve the problem. I guess there's something wrong with the font file.

Monday, August 27, 2012 at 4:27:13 PM
1
preetam 2,308 rep

Hi Przemek,

I imported the texts as a sprite,so its just a png image and its working fine now,
but thanks for giving your time:)

Tuesday, August 28, 2012 at 6:23:37 AM
1
Nathan 6,205 rep

Excellent tutorial, thanks.

I tried about 3 conversions with font2web and another online ttf-woff converter, none of which worked for me. When I downloaded a free ready made woff it worked fine, so I guess some of the online conversions are corrupt or perhaps I was doing something stupid.

Its excellent to know we can properly customise text objects.

Has anyone managed to get it working on cocoon?

Saturday, September 08, 2012 at 7:21:02 AM
1
Przemek32767 24.1k rep

This seems interesting: http://www.scirra.com/forum/what-i-love-about-cocoonjs_topic56385.html
Web Fonts working on CocoonJS would be really great.

Saturday, September 08, 2012 at 6:28:11 PM
1
BruestleMulti 1,652 rep

I tried this tutorial in my game running in Chrome, but webfont did not work.

However, when I changed a .woff file to a .ttf file (TrueType) and in url I changed to '[fontfilename].ttf' and in format I changed to 'truetype', Chrome showed perfectly the webfont.

Then, in Chrome it is possible to use TrueType fonts as webfonts.

Saturday, September 15, 2012 at 7:10:05 PM
-1
ambreen11 280 rep

Its very helpful tutorial..I think its the best tutorial for every web designer to make their own web fonts for their better achievement in <a href="http://www.buraq-technologies.com"> website .</a>.

Tuesday, January 01, 2013 at 8:42:48 AM
1
gabrign 1,171 rep

This works for me if I include the ttf file also inside contruct 2 and css file. Font2Web return the fonts family like "Conv_namefont", this family name must be used too.

Wednesday, January 02, 2013 at 9:14:01 AM
1
part12studios 6,561 rep

I'm a little confused on this. I followed the tutorial, but it seems that whatever font I use in the properties of the specific text is never overridden.

Your tutorial is intended to override the properties of the text object? if so it doesn't seem to be working.

i have a font DS-DIGI.woff (converted from ttf) and i have a DS-DIGI.css file that is (i believe) setup correctly in the .css file

I also noticed that there is a comma after local('DS-DIGI'), but not one after URL.. is that also right? it would seem like each would need a , for consistency.. but i'm not a programmer so i'm taking it at face value.

here is my project..https://www.dropbox.com/s/as7x0xcera5um3h/trouble_with_font.capx

i have two layouts attempting to call on this DS-DIGI font. Any insight would be awesome!

Sunday, January 06, 2013 at 5:44:00 AM
1
lemo 6,651 rep

Guys pay attention, the pixel quality of the exported WOFFs is actually quite different depending on the website you use to convert it. It may depend on your font, but I had much better results with the Font Squirrel Generator (http://www.fontsquirrel.com/fontface/generator) than with Font2Web! (especially when using small font sizes)

Sunday, February 03, 2013 at 11:10:57 AM
1
myrtyx 2,263 rep

Thanks man.... very good tutorial...

Thursday, February 14, 2013 at 9:57:48 AM
1
r4dicaldreamer 3,235 rep

nice...I always wonder how to use uncommon fonts, the one you had in your computer but don't know if it's out there. Thanks a lot

Thursday, March 07, 2013 at 8:24:04 AM
1
myibmaccount 2,574 rep

Thanks worked great!!

Monday, March 11, 2013 at 3:19:58 PM
1
wretchedshark 3,210 rep

this works for firefox and IE, has anybody been able to get it to work for google chrome?

@BruestleMulti could you provide a more detailed process of what you did perhaps please?

Friday, March 15, 2013 at 12:22:30 AM
1
grumpy rObOt 1,475 rep

Thank you. Works great, also in Chrome.

Friday, March 15, 2013 at 6:21:10 PM

Leave a comment

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