Stats

4.7K visitors
54K page views
1,294 translation visitors
5.2K translation page views

Using Web Fonts in the Text object

Favourite 89 favourites
Tutorial written by AshleyOriginally published on 2nd, January 2012 - 5 revisions

Previewing in the editor

You can also preview the chosen font in the Construct 2 editor. To do this, you need to install the web font to your computer.

First add the font to a collection on Google Web Fonts by clicking Add Flavors to your collection. Now you can download the font by clicking Download your collection. A link will appear allowing you to download a zip file with the font in it. Download the font and open the zip file.

Double-click the font file in the zip file and Windows should open a preview of the font. There should also be an option to install the font. The picture below shows the install button for Windows 7, which you can click to install the font to your computer.

Installing a font.
Now restart Construct 2. You should now be able to choose the font in the font picker dialog for the Text object. This allows you to preview the font in the editor, as shown below. Remember, this only installs the font to your computer - you should always use the Set web font action to set web fonts. In a new project you can now set this font in the editor, but it won't work for anyone else unless you use the Set web font action again!

The Web Font in the layout.


Also note for technical reasons not all font formats are supported. You may see a message in the editor that the font is not supported. If so, don't worry - as long as it displays OK in the browser it will work for everyone once you export your game.

Loading time for web fonts

A problem with web fonts is since they are downloaded, there may be a second or so delay before the font is ready to be used. Meanwhile the browser will either display a different font, or nothing at all. This can make the text appear to momentarily flicker.

The good news is the font is cached so next time it should load almost instantly - there's only a delay the first time the font is downloaded.

However, you can work around this by loading all web fonts on startup. For each web font you use in a project, add a text object to your first layout and use the Set web font action to load it. Make the text hidden so it's never seen - it's just loading the web font. Splash screens or title screens are ideal for this. If your splash or title screens use a web font, you might want to use an image there instead, or introduce a second or two delay to give the fonts a chance to load. Then, nobody should ever see the text before the fonts have loaded.

That's all there is to it - have fun using your fonts!

You may also be interested in the tutorial How to use your own web fonts by Przemek32767.

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!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

2
Yann 16.6k rep

Maybe there could be a preload font like the preaload sound of the audio plugin.
Also I was wondering if it was possible to have an "is preloaded" condition either for web font or sound.
This way we could more precisely delay the display of text or sound.
Anyway Great feature (:

Monday, January 02, 2012 at 2:17:13 AM
3
Ashley 195.4k rep

@Yann, I think I'll improve it in future so no delay is needed. Still, the invisible text object basically is a preload. You could also test if it's the first run or not with WebStorage and adjust the delay based on that too.

Monday, January 02, 2012 at 2:25:02 AM
1
Yann 16.6k rep

Cool :] Thanks

Monday, January 02, 2012 at 2:47:48 AM
2
diascarlosryal 3,949 rep

@Ashley The web fonts feature is integrated with PhoneGap? Did you test it?

Monday, January 02, 2012 at 11:32:26 AM
2
Ashley 195.4k rep

@diascarlosryal I haven't tested Web Fonts with PhoneGap yet I'm afraid - it might need a connection to work...

Monday, January 02, 2012 at 6:12:04 PM
3
edisone 18.3k rep

so is better not using webfornts with android or cellphone appz,right ?

Monday, January 02, 2012 at 6:28:27 PM
3
diascarlosryal 3,949 rep

@Ashley I will make some tests, when I have time and post the results. Thank you

Monday, January 02, 2012 at 8:50:43 PM
2
Kyatric 71.1k rep

Yet another nice feature and another nice and clear practical tutorial to help using it.

A very good job as always Ash.

Tuesday, January 03, 2012 at 6:08:54 AM
4
bdunzer 2,147 rep

Hi All,

One thing you might want to look into is base-64 encoding of the fonts and putting them into the CSS. This would increase the size of the CSS file but it would make sure it is there and decrease the delay in rendering. There are a lot of resources for FREE fonts and one good location is FontSquirrel, they even have the converter available...look for the FontSquirrel Generator.

Monday, January 09, 2012 at 12:36:06 AM
2
gregoryg 2,655 rep

Sorry, I'm fairly new to web fonts and am a little confused here. Google's web fonts don't contain the sort of font I want to used (pixelated and chunky), but many other places seem to - including FongSquirrel as bdunzer mentioned.

However, even after going to the "@font-face Kit" link of a font I like there, I can't seem to figure out how to hook up what they give me (a downloadable zip) to Construct in the same way that a Google CSS url works. I assume this isn't what's supposed to happen, however, I can't seem to find a CSS url there.

Where should I be looking? What other websites other than Google Fonts API have an easy way to do this? How do I find that url? Thanks!

Friday, January 20, 2012 at 8:35:59 AM
3
Ashley 195.4k rep
Friday, January 20, 2012 at 9:36:35 AM
2
gregoryg 2,655 rep

@Ashley Yep, thanks a bunch!

Friday, January 20, 2012 at 3:24:13 PM
1
simwhi 6,279 rep

A very useful tutorial. Just what I need... Great work.

Tuesday, February 07, 2012 at 7:15:10 AM
1
preetam 2,308 rep

Thanks for this gr8 tutorial......

Friday, August 24, 2012 at 1:28:34 PM
1
RangerJim 3,425 rep

I've been looking for this...

Tuesday, January 08, 2013 at 4:05:35 PM

Leave a comment

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