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

They have an example using .woff google fonts:

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

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

They have an example using .woff google fonts:

https://github./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;
...

• javascript
• webgl
• pixi.js

• Could it be that you don't have the source listed in the line? Like the .woff? – Brendan Commented Apr 24, 2014 at 22:12
• 2 In the GoodBoy example they're preloading the font, not sure if you are having a race issue with css. try setting {font: "160px HU_Adrien, arial" ... and see if you at least get text. – doog abides Commented May 30, 2014 at 17:05

3 Answers 3

You need to convert HU_A0046.woff with this tool to HU_A0046.XML and 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;
...

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

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

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