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/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 

 

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...

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...
 Share

  • Recently Browsing   0 members

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