Jump to content

Google Fonts once and for all.


Lord_Garfield
 Share

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

 

Link to comment
Share on other sites

  • 1 year later...
  • 8 months later...
  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...