Instant loading of Webfonts possible?

Hi there,

I'm part of a small team working on a simple app, where a release on iOS is priority. A big theme in the game is that it's minimal, meaning not having to wait for anything to load, and being able to jump straight into the game etc. We've found the absolute 100% PERFECT font for the game (Quicksand), but this isn't supported by Construct so we've had to use it as a webfont. But unfortunately this means there's anywhere from a 1-5 second wait for the font to load, causing the game to display the default font and then update to the webfont. As I said, our game has a minimal approach and is quite small in size anyway, so we want to avoid a loading screen altogether. Another thing I should mention is that if the player is not connected to the internet, the webfont will not load which is not acceptable. What I'm getting as is having to outsource a font in such a way is not reliable.

This got us thinking. Is it at all possible to import the CSS file or anything else the font needs to work into the game assets? I see that I can import the CSS file into the game under "Files" in the Projects List, but I see no way to make the game reference this when setting the webfont. Is it even possible?

Apologies if we're not understanding something fundamental about how webfonts work. We are not programmers, which in essence is why we chose Construct 2 (which has served us amazingly by the way)!

from the tut https://www.scirra.com/tutorials/236/us ... ect/page-1

there may be a workaround for you;

Loading time for web fonts

A problem with web fonts is since they are downloaded, there may be a second or so delay before the font is ready to be used. Meanwhile the browser will either display a different font, or nothing at all. This can make the text appear to momentarily flicker.

The good news is the font is cached so next time it should load almost instantly - there's only a delay the first time the font is downloaded.

However, you can work around this by loading all web fonts on startup. For each web font you use in a project, add a text object to your first layout and use the Set web font action to load it. Make the text hidden so it's never seen - it's just loading the web font. Splash screens or title screens are ideal for this. If your splash or title screens use a web font, you might want to use an image there instead, or introduce a second or two delay to give the fonts a chance to load. Then, nobody should ever see the text before the fonts have loaded.

That's all there is to it - have fun using your fonts!

You may also be interested in the tutorial How to use your own web fonts by Przemek32767.

Another alternative would be to convert this font to a SpriteFont. blackhornet's tool would work wonder for that.

Link :

Thanks guys, sorry about the late reply from me! So I take it there isn't a way to "package" everything the webfont needs into the game files so it can be loaded offline?

The font is invisible and is being loaded on startup, in our splash screen actually, but still it doesn't always download in time which is kind of annoying given the type of game that ours is. You're in the menu very quickly after the splash screen which does contain text that needs to change, so can't use sprites there

Magistross I did take a look at that sprite font generator before but I did not think custom character widths were possible, but now that I read it again it seems that IT IS! Not quite understanding how it works as its outside of my ability but will give it a shot and let you know if it works!

Try this tutorial, it uses project files..

https://www.scirra.com/tutorials/237/ho ... -web-fonts