Google Fonts once and for all.

[Lord_Garfield]

Hi all,

 

I think I found a solution in loading google fonts from your app instead of loading them with the google api.

 

It is inportant to embed your fonts if you want to build native apps. So you can make shure your app works when offline.

But using the @font-face in css you still have the problem that your font is not loaded immediatly and text in phaser will be rendered in the default font.

 

Problem description:

 

You load a font with @font-face or google api and you have to trigger a time-out to make shure the font is loaded before you add text in phaser.

Using the google api you can write this like phaser.io example http://phaser.io/examples/v2/text/google-webfonts

 

Nice but you can't use a time out when you load your font localy. (maybe a font you created on your own or paid for)

There are things like font.js that try to do this but I think it is hard to implement.

 

My solution

 

1. Get a font
   1. Download a .ttf font from google or another place. (not shure if it will work with other types than ttf.)
   2. Go to fontsquirrel webfont creator http://www.fontsquirrel.com/tools/webfont-generator
   3. upload all fonts to your assets folder (or any other folder you like.)
   4. Use the @font-face that was given to you by fontsquirrel so you embed all font types to support almost every browser.
   5. Adjust the font-face sources so your path of the font file is set to the correct folder (assets or your folder)
2. Load the font in your html file
   1. Put the your @font-face into the header tags of your index file between <style></style> tags.
   2. In your body the first element you create is a div with these settings: <div style="font-family:YourFontName; position:absolute; left:-10000px">Font Loaded</div>

That is it. Phaser will use this font immediatly. no waiting times. This is becouse the div already loaded the font before phaser is loaded. Just make shure phaser is loaded after document.load.
Or in JQuery terms. load it in the function $(function() {});

 

Kind regards.

 

Lord Garfield

 

[moester]

This is awesome!! Why isn't this post sticky? 

All other solutions are bound to google web fonts which enforces your user to have internet connection on,

which is imo not a good solution. 

[mattbrand]

Thank you for this - this is AMAZING!

[espace]

Hi,

Could you put a code example ? It help me a lot....

Thanks