Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Integrated Web Fonts in Construct 3

by Ashley | 16th, February 2017

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.

Fonts folder in the Construct 3 project bar.

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.

Web font preview in the Construct 3 editor.

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.

Font picker in Construct 3.

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.

Web font displaying in the Construct 3 layout view.

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.

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.

Editing text with a dialog in Construct 3.

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.

Previewing web fonts at runtime in Construct 3.

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:

Promotional footer image for Construct 3
Now follow us and share this

Tags:

Comments

5
mercedescolomar 570 rep

@Ashley
But is there not a performance hit when using the text object? Hence everyone uses Spritefonts?

Thursday, February 16, 2017 at 12:29:08 PM
6
Ashley 189.2k rep

@mercedescolomar - text objects render just like sprites, if they're not changing. So they should be perfectly fast. Changing text every tick causes the text to be re-flowed and re-rendered, but even that's usually pretty fast. Do you have any specific performance measurements you're concerned about?

Thursday, February 16, 2017 at 12:34:15 PM
2
Psychokiller1888 3,931 rep

Good thing, wedid use a css file to load local fonts on C2

Thursday, February 16, 2017 at 12:40:46 PM
2
XpMonster 14.2k rep

Finally good text editor.

Thursday, February 16, 2017 at 12:45:42 PM
3
lamar 33.9k rep

Glad to see that extended text editing box. Pain in the butt typing and editing long text in an inch wide column box. Maybe that could also be in an update for C2?

Thursday, February 16, 2017 at 12:47:42 PM
2
TheRealDannyyy 42.2k rep

I appreciate this very much, should make things easier for us. Thanks!

@Ashley I don't know if you want to share any details about this yet but judging by the "edit text" window, it seems like that we still won't get any options for in-text formatting inside C3. Is that indeed the case or did I perhaps miss something?

I mean JS Dev's like Rex have already proven that in-text formatting is fairly easy to implement and possible, so I would really like to see C3 supporting that by itself.

Thursday, February 16, 2017 at 12:48:54 PM
5
MonDieu 6,655 rep

@Ashley Will C3 get support for vector art (svg) also or would it have too much of a performance hit?

Thursday, February 16, 2017 at 12:51:59 PM
3
Anonynoise 4,385 rep
@mercedescolomar - text objects render just like sprites, if they're not changing. So they should be perfectly fast. Changing text every tick causes the text to be re-flowed and re-rendered, but even that's usually pretty fast. Do you have any specific performance measurements you're concerned about?
quoted from Ashley

the text object made my (120mb ) project stutter every sec. (because i had it Update every sec. so that was pretty obvious) but the text it was displaying was showing over 20 global variables. it was for playtesting on the nexus7 2013 tablet. still hitting 50-60fps most of the time.

Thursday, February 16, 2017 at 12:53:26 PM
2
alspal 20.1k rep

Fantastic, these are the kind of editor Improvements I love! can't wait for it. I hope there's some surprises with the event sheet too! 😊

Thursday, February 16, 2017 at 12:55:12 PM
2
mateussales 3,130 rep

Nice feature! @Ashley @Tom Will .svg files be supported?

Thursday, February 16, 2017 at 12:57:38 PM
2
CGFX Studio 772 rep

waiting for the construct 3 software

Thursday, February 16, 2017 at 1:03:41 PM
3
Rable 2,291 rep

Another big improvement! Looking forward to the public beta!

Thursday, February 16, 2017 at 1:06:36 PM
4
shinkan 34.4k rep

@Ashley Same question. Will we be finally able to make each letter/word different size/color/style or even animate?

I appreciate this very much, should make things easier for us. Thanks!

@Ashley I don't know if you want to share any details about this yet but judging by the "edit text" window, it seems like that we still won't get any options for in-text formatting inside C3. Is that indeed the case or did I perhaps miss something?

I mean JS Dev's like Rex have already proven that in-text formatting is fairly easy to implement and possible, so I would really like to see C3 supporting that by itself.
quoted from TheRealDannyyy
Thursday, February 16, 2017 at 1:11:03 PM
2
abdalghani 8,284 rep

Good job, C3 team know what they are doing, keep going

Thursday, February 16, 2017 at 1:14:18 PM
3
kingpirux 955 rep

this was the best part!! i loved it www.scirra.com/images/c3/webfonts-edit-text.png

Thursday, February 16, 2017 at 1:17:09 PM

Leave a comment

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