Jump to content

How to use font files, eg .ttf


AdamRyanGameDev
 Share

Recommended Posts

OK, whie the docs for Ph3 are a bit sparse... why not try Ph2! There will be many smaller parts unchanged (for now)!

And in this case it seems to have worked! 

Here is a proof of concept I got working

 

<!DOCTYPE html>
<html>
<head>
    <script src='//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js'></script>
	<style media='screen' type='text/css'>
	  @font-face {
        font-family: font1;
        src: url('media/planetbe.ttf');
        font-weight:400;
         font-weight:normal;
      }
     .fontLoader {
         position: absolute;
         left: -1000px;
         visibility: hidden;
      }
	</style>
</head>
<body>
<div class='fontLoader' style='font-family: font1;'>-</div>.....

then to call it in the create() function:

textBoxNameVariable.setFontFamily('font1');

 

Thank you and for more info see these two Phaser2 threads

And 

 

Link to comment
Share on other sites

  • 1 month later...

Hi!

I noticed that the described fix doesn't actually work in my current project, though the font definitely does work when it's just used in a DOM element. I also tried converting the font in question to WebFont and using that, as well as the preload hack by creating a text object in a boot phase of the game, but none of these options seem to work.

https://github.com/coltonoscopy/phaser3-pong
https://github.com/coltonoscopy/phaser3-pong/blob/master/index.html
https://github.com/coltonoscopy/phaser3-pong/blob/master/TitleScene.js

Rather than displaying the font it's supposed to, it just seems to be displaying some kind of Serif font (should be testable out of the box with a simple CLI server). Anybody know what the best way to go about making this work is? Thanks so much for your time and help!

Link to comment
Share on other sites

  • 2 months later...
 Share

  • Recently Browsing   0 members

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