Introduction
Hi! Since I started with Construct 2 I delved unto the whole Web Fonts thing, it seemed one of the best features available - not loading fonts into the game itself? Awesome!
But there were several problems with its implementations, it was complicated, and there were font popping issues all over the place. I tried my best to fix them and it seems that I got a definitive fix.
This tutorial doesn't aim to repeat already known information, though I might include them if requested, and will ask for permission.
About Online and Offline/Local Web Fonts
With Online Web Fonts I mean Web Fonts that are loaded from an external website than yours, say, Google Fonts.
And Offline or Local Web Fonts mean that you need to convert your font using a conversor then insert those fonts on your Construct 2 project. This is required if you want to use other fonts than Google's.
How to load Web Fonts
We have already two very nice tutorials that I recommend, one for Online Webfonts, and another one for Offline/Local Webfonts, please check them:
1. Online Webfonts Tutorial
2. Offline/Local Web Fonts Tutorial
Fixing Bugs
Font Popping
The most important bug to fix is the font popping - when you call your font, it takes time for the browser to download it. Depending on the size of your fonts, it might take several seconds until they download, you can't display them instantly or you will see font popping. Also, Construct 2 is very smart, so it doesn't actually load the objects until they're on screen.
So let's fix it with a proven workaround. This workaround has been tested with very low bandwidth, also. You can check the attached .capx file too.
If you want the straight answer, all you need to do is load an "empty space" character (Alt+160 or " ") to a visible Text object before anything, then use a Splash Screen with enough Wait time to preload all your fonts. After that Wait, make your Text visible.
1) Add a Text object.
2) Position the Text object inside your layout and set its text to " " (Alt+160).
3) Add a Sprite object with your logo or just any image or sprite.
4) Use the Fade behaviour and set the Sprite to at least, let's say, 7-8 seconds total (the more Fonts your game has, the more time you should add).
5) Use Ctrl+Click with your "empty" Text object, drag the new Text to somewhere then add some text to it like "This is a test".
6) Make that new Text object Invisible on Layout start.
7) Take note of the new Text object UID.
5) In your Events sheet, set it to something like this (choose any Web Font you like):
And that's it! In the example there's even a Layout change.
Bugs to fix from Browser Vendors
As far as I'm aware of, with this fix, the only thing that needs to be fixed is the font size and height to be the same in all browsers. This is only fixable by vendors and can't be fixed inside Construct at the moment.
Credits
People that helped with tips or whatever to make this tutorial: @Ashley, @Przemek32767, @ome6a1717, @Paradox, @Dave Hailwood, @Thndr, @SecondDimension