How to use your own Web Fonts

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.

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).Then create a text object.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):

Alright, time to preview your project. This is what you should get: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:

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!

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.

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.

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,

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?