i am currently learning Pixijs. I went through the tutorial of this guy: github/kittykatattack/learningPixi Nice one btw.
Environement: Xampp, Firefox, Pixijs, HTML, CSS
Now I try to load a custom font. The first time I load the Page where my Pixijs project should run, the fonts are not showing up and the console shows some error messages... The second time I load the page (without deleting the cache) the text is showing up with the given font!
Why?!
Here are the snippets for loading the font:
index.html:
<head>
<meta charset='UTF-8' />
<style>
@font-face{
font-family: "FFFForward";
src: url("assets/fonts/fffforward.TTF");
}
* {padding: 0; margin: 0}
</style>
app.js:
function DrawText(){
PointsTopText = new Text(
"P1: " + PointsTop,
{fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsBotText = new Text(
"Cpu: " + PointsBot,
{fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsTopText.position.set(0, Renderer.height / 2 - 32 * 2);
PointsBotText.position.set(0, Renderer.height / 2);
World.addChild(PointsTopText);
World.addChild(PointsBotText);
}
Here is the error log of the console:
console:
downloadable font: bad search range (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: bad range shift (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: cmap: bad id_range_offset (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: hdmx: the table should not be present when bit 2 and 4 of the head->flags are not set (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: hdmx: Table discarded (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
As i said, this message appears only the very first time i load my page. The second time everything is fine.
What can i do to prevent this?
Why does this happen?
What is the meaning of this?
i am currently learning Pixijs. I went through the tutorial of this guy: github./kittykatattack/learningPixi Nice one btw.
Environement: Xampp, Firefox, Pixijs, HTML, CSS
Now I try to load a custom font. The first time I load the Page where my Pixijs project should run, the fonts are not showing up and the console shows some error messages... The second time I load the page (without deleting the cache) the text is showing up with the given font!
Why?!
Here are the snippets for loading the font:
index.html:
<head>
<meta charset='UTF-8' />
<style>
@font-face{
font-family: "FFFForward";
src: url("assets/fonts/fffforward.TTF");
}
* {padding: 0; margin: 0}
</style>
app.js:
function DrawText(){
PointsTopText = new Text(
"P1: " + PointsTop,
{fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsBotText = new Text(
"Cpu: " + PointsBot,
{fontFamily: 'FFFForward, Arial', fontSize: 32, fill: 'white'}
);
PointsTopText.position.set(0, Renderer.height / 2 - 32 * 2);
PointsBotText.position.set(0, Renderer.height / 2);
World.addChild(PointsTopText);
World.addChild(PointsBotText);
}
Here is the error log of the console:
console:
downloadable font: bad search range (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: bad range shift (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: cmap: bad id_range_offset (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: hdmx: the table should not be present when bit 2 and 4 of the head->flags are not set (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
downloadable font: hdmx: Table discarded (font-family: "FFFForward" style:normal weight:normal stretch:normal src index:0) source: [path]/assets/fonts/fffforward.TTF PixiJs:6:14
As i said, this message appears only the very first time i load my page. The second time everything is fine.
What can i do to prevent this?
Why does this happen?
What is the meaning of this?
Share Improve this question edited Apr 9, 2019 at 9:17 Neuron 5,9115 gold badges43 silver badges62 bronze badges asked Sep 14, 2017 at 11:57 OlsonLongOlsonLong 1251 gold badge4 silver badges15 bronze badges2 Answers
Reset to default 7Use webfontloader - https://github./typekit/webfontloader - to synchronously load your fonts before you do any drawing in PixiJS. This also works with other canvas-based apps.
Put the following in the <head> section of your HTML page:
<script src="https://ajax.googleapis./ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Press Start 2P']
},
active:e=>{
console.log("font loaded!");
// now start setting up your PixiJS (or canvas) stuff!
}
});
</script>
Try to use PIXI.loader
const loader = new PIXI.loaders.Loader();
loader.add('fffforward', 'assets/fonts/fffforward.TTF');
loader.load((loader, resources) => {
PointsTopText = new Text(
"P1: " + PointsTop,
{fontFamily: 'FFFForward', fontSize: 32, fill: 'white'}
);
World.addChild(PointsTopText);
});