Google Fonts once and for all.

Recommended Posts

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


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.