One area with major improvements in Construct 3 is support for web fonts. These are downloadable custom fonts often used in web pages, but also usable in HTML5 games. There are many sites like Google Fonts providing directories with a wide range of styles and designs, making it easy to find a typeface that suits your game.
Many Construct games also use the SpriteFont plugin for custom text styles. These are great for pixel-perfect multicolor designs, but they are limited to a single bitmap image per character. Web fonts on the other hand are a vector format, so they are better at scaling to different sizes. They're also often available in a range of variants like bold and italic. It's also often easier to find web fonts that support non-English languages, since sites like Google Fonts can list fonts by the languages they support. Both WebFonts and SpriteFonts have their uses — there isn't one which is clearly better than the other for all purposes. Many developers will still choose web fonts though, and in this post we're focusing on their improved support in Construct 3.
In Construct 2 you could load a web font from a URL, but it had a number of drawbacks: it didn't preview in the layout view; you had to load from events; text objects could have a flash-of-unstyled-text (FOUT); and it didn't automatically work offline. We've fixed all of this — and more — in Construct 3.
In the Project Bar
First of all, we've reorganised the Project Bar so there is a dedicated folder for your web fonts.
Web fonts imported to this folder are stored with your project, instead of loaded remotely. This ensures they're always locally available and that they work offline. In this case we've imported a .woff2 file for Pacifico from Google Fonts.
You can import fonts in a range of formats, such as TTF or EOT, but we recommend Web Open Font Format (WOFF) which is now widely supported. You can also use WOFF2, which is supported by the latest version of all major browsers.
Once you've imported a web font, there's also a built-in font preview to quickly check what the font looks like.
When choosing a font for the Text object, you can then also pick from any web fonts imported to the project. This allows you to directly set a Text object to use one of your web fonts in the editor without needing to set it via events.
Choosing a web font is usually a better idea than picking a local font, since there are very few fonts which you can rely on having been pre-installed on all devices.
Better yet, the text object displays with the web font in the Layout View! This is great for accurately previewing how the layout will look with your web fonts applied, without having to preview the project.
We've also worked to improve the rendering quality of text in the Layout View. In particular, zooming in to a text object now renders the text with increasing quality — just like it does at runtime — rather than stretching the same characters larger like in Construct 2's Layout View.
https://www.scirra.com/images/c3/webfonts-zoom.mp4
One other related improvement we've made is you can edit Text object's content via a resizable dialog. This gives you a more convenient place to enter large amounts of text.
When you preview your project in the editor or run it after export, Construct 3 now pre-loads webfonts before starting the game. This ensures there is no FOUT and it displays from the very first frame with the correct font applied.
When you export your project the web font files are also exported, just like other project files. They're also saved for use offline. This ensures they'll display correctly on all platforms, even those that run offline, like NW.js and Cordova. Web font files are also pretty small — in this example, Pacifico is just a 30kb WOFF2 file. This is so small it will likely have negligible effect on the download size. So there's hardly any cost to using custom web fonts!
Conclusion
Web fonts are much more deeply integrated in Construct 3. This makes it painless to use beautiful typography in your games. The new support is so much better we've actually deprecated the Text object's 'Load web font' action, since there's no need for it any more in Construct 3. (Like with any deprecation, old projects can keep using it though, to remain compatible.) We look forwards to seeing more web fonts in your games!
Catch-up
Missed our earlier announcements? Here's a list of all the news about Construct 3 so far: