[PIXI] Using ttf/otf fonts

[d13]

Hello!

 

Does anyone know if it's possible to load and use ordinary ttf or off fonts with Pixi?

Using the loader doesn't seem to work?

loader  .add("fonts/puzzler.otf")  .load(setup);function setup() {    let message = new PIXI.Text(    "Test message",     {font: "16px puzzler", fill: "red"}  );  stage.addChild(message);  gameLoop();function gameLoop(){  requestAnimationFrame(gameLoop);  renderer.render(stage);}

Pixi's example shows how to use Google web fonts and bitmap fonts, but not how to load plain .ttf files.

 

http://pixijs.github.io/examples/index.html?s=demos&f=text-demo.js&title=Text

[d13]

... Oh, Pixi doesn't have a built-in font file parser!

 

No problem:

function parseFont(source) {  let fontFamily = source.split("/").pop().split(".")[0];  let newStyle = document.createElement("style");  let fontFace    = "@font-face {font-family: '" + fontFamily + "'; src: url('" + source + "');}";  newStyle.appendChild(document.createTextNode(fontFace));  document.head.appendChild(newStyle);}

It works, but I want the fonts to be parsed immediately after they're loaded.

So, I can call this parser with the loader's `after` method:

loader  .add("fonts/SpicyRice.ttf").after(parseFont("fonts/SpicyRice.ttf"))  .add("fonts/PetMe.ttf").after(parseFont("fonts/PetMe.ttf"))  .load(setup);

The only problem is, I get this error message:

TypeError: fn is undefined (2) pixi.js:5376:8

I'm probably using the loader incorrectly.

 

Does anyone know what I might be doing wrong?

[xerver]

https://github.com/englercj/resource-loader

 

You are calling `parseFont` which returns undefined, so you are actually doing .after(undefined) which is an error.

 

Also even if this did work, what you are doing is loading the data as binary (or text technically) via XHR and then telling the browser to load it again via css after all resources have loaded. The resource loader doesn't support fonts yet

 

https://github.com/englercj/resource-loader/issues/5

[d13]

You're the Man, Xerver!

You're so right - what I'm doing makes no sense 

But now I understand the problem a little better... I'll tinker around some more and see what I can come up with. 

 

The resource loader doesn't support fonts yet

 

 

No worries, fonts are kind of a gap in the HTML5 spec so we have to hack around them all the time    

[d13]

Ok, I did some more work - no luck, Pixi's loader doesn't work for fonts.

So, my answer for now is to go back to using Font.js, which works brilliantly.