Custom font in Pixi.js

Question

I try to load a custom font into Pixi.js (2D WebGL framework).

They have an example using .woff google fonts:

https://github.com/GoodBoyDigital/pixi.js/tree/master/examples/example%2010%20-%20Text

I converted my .ttf to .woff and added in css:

@font-face
{
    font-family: "HU_Adrien";
    src: local('HU_Adrien'), url('HU_A0046.woff') format('woff');;
}

div.font{
    font-family: "HU_Adrien";
    color: white;
}

It shows in my div but not in my Pixi stage.

...
    // create a text object with a nice stroke
    var spinningText = new PIXI.Text("I'm fun!", {font: "160px HU_Adrien", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});
    // setting the anchor point to 0.5 will center align the text... great for spinning!
    spinningText.anchor.x = spinningText.anchor.y = 0.5;
    spinningText.position.x = 620 / 2;
    spinningText.position.y = 400 / 2;
...

Answer 1

It worked in my pixi 4 app after installing the .woff file (no conversion or bitmap text required) and adding

font: "24px Open Sans Regular"

to my pixi style definition.

fonts.css

@font-face {
    font-family: 'Open Sans Regular';
    src: url('/font/OpenSans-Regular.woff');
     /* format("woff"); // it never worked with a format */
}

app.js

var WebFont = require("webfontloader");
let WebFontConfig = {
    custom: {
        families: ['Open Sans:300,400italic,500italic,600italic,700italic,400,500,600,700'],
        urls: ['/css/fonts.css']
      }
  };
  WebFont.load(WebFontConfig);

webpack.config.js

module.exports = {
    entry: {
        main: "./src/app.ts",
        // vendor: [
        //     "webfontloader"
        // ]
    },
    output: {
        filename: "./bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        alias: {
            "webfontloader": path.resolve(__dirname, "./node_modules/webfontloader/webfontloader.js")
        },
        // Add '.ts' as resolvable extensions.
        extensions: [".ts", ".js"]
    }, …

Make sure to install

npm install webfontloader --save
npm i -D @types/webpack-env

Answer 2

You need to convert HU_A0046.woff with http://www.angelcode.com/products/bmfont/ tool to HU_A0046.XML format and then add the file name to the preload list. Then you should call PIXI.Bitmaptext

Example:

...
var loader = new PIXI.AssetLoader(/*more media...*/, ["HU_A0046.xml"]); 
var spinningText = new PIXI.BitmapText("I'm fun!", { font: "35px FontName"}); //You can see the font name within the XML
spinningText.position.x = 620 / 2;
spinningText.position.y = 400 / 2;
...

Answer 3

In order to use a custom web font with PIXI you need to use the google web font api with it you can use web fonts from Google and other cdns as well as your own local web fonts you can read more at https://github.com/typekit/webfontloader

<script>
  WebFontConfig = {
    typekit: { id: 'xxxxxx' },
    google: {
        families: ['Droid Sans', 'Droid Serif']
    },
    custom: {
        families: ['My Font', 'My Other Font:n4,i4,n7'],
        urls: ['/fonts.css']
    },

    active: function() {
      // do something
      init();
    }
  },

  active: function() {
    // do something
    init();
  }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

In this example, the fonts.css file might look something like this:

@font-face {
  font-family: 'My Font';
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: italic;
  font-weight: normal; /* or 400 */
  src: ...;
}
@font-face {
  font-family: 'My Other Font';
  font-style: normal;
  font-weight: bold; /* or 700 */
  src: ...;
}

*it's important to start using the font after they are rendered

*convert your font with a tool like: http://www.font2web.com/

*it will give you the needed web font files as well as the css code for your custom fonts