dnassler Posted February 25, 2014 Share Posted February 25, 2014 I have looked at the examples and have looked at the forum link: http://www.html5gamedevs.com/topic/2214-how-to-use-a-tffotf-font-with-phaser/ ... but I still do not know how, exactly, to specify an arbitrary font/webfont in phaser. Let's say, for example that I wanted to use a font found on google? What function calls do I need to make? What assets do I need to have? What does my HTML have to look like? What has to be exactly in the JAVASCRIPT file? The examples for Phaser are not helping me I must be a dummy! Link to comment Share on other sites More sharing options...
lessmilk Posted February 25, 2014 Share Posted February 25, 2014 Load the Google font in your html or css, and simply use the font name in your text:this.game.add.text(10, 10, "this is a text", { font: "30px TheFont"} );Last time I tried, it worked! Link to comment Share on other sites More sharing options...
dnassler Posted February 25, 2014 Author Share Posted February 25, 2014 Thanks. I got it to work now. I think one reason I was having trouble may have been because the font was not totally loaded when I did my game.add.text call. But I noticed that if I added a timer event to set the text then it worked: game.time.events.add(1000, function(){healthText.setText( totalHealthShooter );scoreText.setText( totalPrizeHits );}, this); Link to comment Share on other sites More sharing options...
rich Posted February 26, 2014 Share Posted February 26, 2014 Here is how you can do it under Phaser 2.0 - you still need the 1 second delay, I've yet to work out a reliable way to avoid that. But at least with this method you don't have to add anything into your html / css.var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });// The Google WebFont Loader will look for this object, so create it before loading the script.WebFontConfig = { // 'active' means all requested fonts have finished loading // We set a 1 second delay before calling 'createText'. // For some reason if we don't the browser cannot render the text the first time it's created. active: function() { game.time.events.add(Phaser.Timer.SECOND, createText, this); }, // The Google Fonts we want to load (specify as many as you like in the array) google: { families: ['Revalia'] }};function preload() { // Load the Google WebFont Loader script game.load.script('webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js');}var text = null;var grd;function create() { game.stage.setBackgroundColor(0x2d2d2d);}function createText() { text = game.add.text(game.world.centerX, game.world.centerY, "- phaser -\nrocking with\ngoogle web fonts"); text.anchor.setTo(0.5); text.font = 'Revalia'; text.fontSize = 60; // x0, y0 - x1, y1 grd = text.context.createLinearGradient(0, 0, 0, text.canvas.height); grd.addColorStop(0, '#8ED6FF'); grd.addColorStop(1, '#004CB3'); text.fill = grd; text.align = 'center'; text.stroke = '#000000'; text.strokeThickness = 2; text.setShadow(5, 5, 'rgba(0,0,0,0.5)', 5); text.inputEnabled = true; text.input.enableDrag(); text.events.onInputOver.add(over, this); text.events.onInputOut.add(out, this);}function out() { text.fill = grd;}function over() { text.fill = '#ff00ff';} yovo 1 Link to comment Share on other sites More sharing options...
x2l2 Posted July 17, 2014 Share Posted July 17, 2014 i try to us this and load diferent weight versions like this: google: { families: [ 'Roboto:400,300,500,700,700italic,500italic,400italic,300italic:latin' ] } but look like i can not use this :label_title.fontWeight = '300';or label_title.fontWeight = 'light';is there a way or just i cant use it ? Link to comment Share on other sites More sharing options...
owen Posted August 13, 2014 Share Posted August 13, 2014 Been wondering about this.Is it not possible to preload fonts (.ttf, .otf files etc) just like we preload graphics, in the preload() section? (And therefore don't need any timer delay) To be clear I want to use css3 font face and not google fonts. Link to comment Share on other sites More sharing options...
lewster32 Posted August 13, 2014 Share Posted August 13, 2014 It's unfortunately not that simple - see this article: http://gamedev.stackexchange.com/questions/7244/html5-check-if-font-has-loaded Also, this one has more on the subject and some possible solutions: http://stackoverflow.com/questions/6117553/external-font-on-html5-canvas owen 1 Link to comment Share on other sites More sharing options...
kleepklep Posted February 18, 2015 Share Posted February 18, 2015 Ran into the same issue. The proper way to use the Google font weights as x2I2 wants to do is to include the weight in the font name (not by assigning a fontWeight) like so: font: '700 35px Roboto' Here's the code I'm usingIn my HTML page<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Raleway:400,500:latin', 'Rokkitt::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })();</script>In my Phaser codevar stat = game.add.text(876, 204, '1000 Points', { font: '500 35px Raleway', fill: '#ff0000',}); richpixel and odelia 2 Link to comment Share on other sites More sharing options...
salty-piggy Posted March 7, 2015 Share Posted March 7, 2015 This method has been working for me: Put your css (link or inline both work) in the head of index.html before any of your scripts, and use the @import rule to load the fonts.<!DOCTYPE html><html><head> <title>My Game</title> <link rel="stylesheet" href="style.css"> <script src="phaser.min.js"></script> <script src="game.js"></script></head><body></body></html>In your CSS:@import url(http://fonts.googleapis.com/css?family=Lobster|Roboto);body { font-family: Lobster, Roboto; // list any fonts you want to use in your game here, and you're good to go}I've tested this in the latest versions of Chrome, Firefox, and Safari, and it seems to be working fine. I have yet to test it using @font-face with self-hosted fonts, however. Hope it helps! keysabyl 1 Link to comment Share on other sites More sharing options...
swervo Posted March 30, 2015 Share Posted March 30, 2015 It does work with @font-face. Here's how: In your CSS:@font-face { font-family: 'fontName'; src: url('fonts/fontName-bold.ttf') format('truetype');}body { font-family: 'fontName';}.fontLoader { position: absolute; left: -1000px;}In order to 'force' the font to load you need to have some body text, hence the .fontLoader class above if you want to hide it. Once loaded you can just use it in your game as you would normally. Link to comment Share on other sites More sharing options...
staff0rd Posted January 27, 2016 Share Posted January 27, 2016 How do you correctly specify multiple sizes? Say for example, I want to display some text at 32px and at another at 64px? I have the following in my html; <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"> However unless I have this in my CSS; body { font-family: 'Roboto'; font-size: 32px; } Then the following Phaser call displays a fallback font-face; new Phaser.Text(this.game, 0, 0, "My text", { font: "32px Roboto", fill: 'white'} ); It looks like having any size in the new Phaser.Text() call that was not already assigned to body in css results in the expected font face not being displayed. This means only one size can be displayed. Any pointers on how I can fix this, or is it a limitation? Link to comment Share on other sites More sharing options...
staff0rd Posted January 27, 2016 Share Posted January 27, 2016 Gah, nevermind - this was being weird only because the browser had not yet requested the font when the new Phaser.Text() was called. I resolved this by making an invisible text call in the BootState, so by the time the real one was called the font was already present. Befive.Info and Hulsen 1 1 Link to comment Share on other sites More sharing options...
Hulsen Posted January 8, 2018 Share Posted January 8, 2018 On 1/27/2016 at 5:05 AM, staff0rd said: Gah, nevermind - this was being weird only because the browser had not yet requested the font when the new Phaser.Text() was called. I resolved this by making an invisible text call in the BootState, so by the time the real one was called the font was already present. This solved my problem. I prefer this way better than waiting for 1s delay. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts