AdamRyanGameDev

How to use font files, eg .ttf

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/phaser@3.1.2/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 

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

@coltonoscopy I've been having the same issue as you. However, I can get the font to load when I load an image during the `preload` lifecycle event. It doesn't have to be anything to do with the font. Just loading any image causes the font to properly be loaded into Phaser and not just the DOM elements.
**on Ph3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.