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:
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):
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:
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.