Secretmapper Posted February 21, 2014 Share Posted February 21, 2014 Forgive me if it is in the examples/or docs somewhere (trust me, I looked ) but I can't find anything about embedding (actual) fonts. I know that we can embed bitmap fonts, but how can we use actual tff/woff files for example? Is this something that can be done by using css (font-family)? Or is this a limitation of HTML5? The reason I need to use actual fonts is for styling (fill, stroke, etc) since I need different styles for the same font. Thanks! Link to comment Share on other sites More sharing options...
rich Posted February 21, 2014 Share Posted February 21, 2014 I use Googles web font loader personally, but there are other ways too. The thing is, you need to be sure the font has loaded and is available to the DOM before you create your Text object in Phaser / Pixi, or you'll get a default font. Link to comment Share on other sites More sharing options...
Secretmapper Posted February 21, 2014 Author Share Posted February 21, 2014 Cool so using font-face css is a way to do it then? Thanks! I'm wondering why it's not in core phaser though? Like a loadText method in the loader. I think it would make sense so that game-related fonts would be injected through the game's loader. Or is this a bad idea? Link to comment Share on other sites More sharing options...
rich Posted February 21, 2014 Share Posted February 21, 2014 Because you can't load a font into canvas. Canvas can only render fonts that are present in the DOM. Link to comment Share on other sites More sharing options...
Secretmapper Posted February 21, 2014 Author Share Posted February 21, 2014 Right, but would it be possible to inject the css (prepending the font style to the head as an inline style?). I'm not really too experienced with web dev though so that might be a can of worms. Just wondering if it would be practical. Link to comment Share on other sites More sharing options...
rich Posted February 21, 2014 Share Posted February 21, 2014 There's no relation between css and canvas text functions at all. Link to comment Share on other sites More sharing options...
Secretmapper Posted February 22, 2014 Author Share Posted February 22, 2014 Yes I meant injecting the custom face font in the css, e.g like?@font-face { font-family: 'custom'; src: url('url-to-font');}from js? Granted it would be easy to just add it myself (just four lines) but if it's possible it might be great to work with a consistent api (i.e. the loader adds that bit of css itself). Once again, I'm not really that experienced though, so I may just be spouting wrong things I hope I'm not taking too much of your time Link to comment Share on other sites More sharing options...
4ucai Posted February 23, 2014 Share Posted February 23, 2014 Yes I meant injecting the custom face font in the css, e.g like?@font-face { font-family: 'custom'; src: url('url-to-font');}from js? Granted it would be easy to just add it myself (just four lines) but if it's possible it might be great to work with a consistent api (i.e. the loader adds that bit of css itself). Once again, I'm not really that experienced though, so I may just be spouting wrong things I hope I'm not taking too much of your time yes that would work. I just tried the simple <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>then use itthis.game.add.text(0, 0, 'text here', { font: '20px Londrina Solid', fill: '#663300', align: 'center' }); Link to comment Share on other sites More sharing options...
Recommended Posts