Search the Community

Showing results for tags 'Google fonts in phaser'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 1 result

  1. 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 example 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 Get a font Download a .ttf font from google or another place. (not shure if it will work with other types than ttf.) Go to fontsquirrel webfont creator upload all fonts to your assets folder (or any other folder you like.) Use the @font-face that was given to you by fontsquirrel so you embed all font types to support almost every browser. Adjust the font-face sources so your path of the font file is set to the correct folder (assets or your folder) Load the font in your html file Put the your @font-face into the header tags of your index file between <style></style> tags. 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