Using Web Fonts in the Text object




13,400 visits, 28,004 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

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.

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!

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.


  • Order by
Want to leave a comment? Login or Register an account!