Load BitmapFont from blob or data url

[Laura]

Hello!

I have a custom font that I create and I want to test it before being downloaded as an archive. At the moment of the test, I do not have a font file to load it using the BitmapText(text, OPTIONS) functionality.

I was wondering if I can load it directly from an xml data string or blob or data url. I checked the official documentation (BitmapFont, BitmapFontLoader), but it is unclear to me if that will work. I would greatly appreciate an example, handling custom fonts is scarce on the internet.

Thank you!

Edited June 26, 2020 by Laura

[jonforum]

here a good way to start, take a look on code from `add local fonts loader`

https://github.com/pixijs/pixi-text-style/pull/20
 

[Laura]

Thanks for the suggestion! I have tried the approach with @font-face (I'm not sure if I need to install some package to access FontFace, Angular doesn't recognize the class). I set the style as follows:

@font-face {

font-family: 'testFont';

src: url(${pngBase64}) format(png);

font-weight: normal;

font-style: normal;

}`;

However, it doesn't work and I am not really sure if it's supposed to work, since a bitmap has also a descriptor file, not only the png image and I didn't find anywhere the way to load that in font-face.

[jonforum]

8 hours ago, Laura said:

Thanks for the suggestion! I have tried the approach with @font-face (I'm not sure if I need to install some package to access FontFace, Angular doesn't recognize the class). I set the style as follows:

@font-face {

font-family: 'testFont';

src: url(${pngBase64}) format(png);

font-weight: normal;

font-style: normal;

}`;

However, it doesn't work and I am not really sure if it's supposed to work, since a bitmap has also a descriptor file, not only the png image and I didn't find anywhere the way to load that in font-face.

the code you show me seem `CSS`, and not supports variables.
Try use `LESS` instead if you need implement variable in CSS.

for font face it should look like this for css.

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
	src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
		url('./res/fonts/roboto/roboto-v20-latin-100italic.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url('./res/fonts/roboto/roboto-v20-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
		url('./res/fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),
		/* Chrome 26+, Opera 23+, Firefox 39+ */
			url('./res/fonts/roboto/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

 

Edited July 9, 2020 by jonforum

[Laura]

Yes, it was css, assigned to a variable and written with backtick, created dynamically inside a method and it worked for some woff font from the internet. I wasn't very specific in my answer.

    const nodeStyle = document.createElement('style');
    nodeStyle.textContent = `
    @font-face {
      font-family: 'testFont';
      src: url(${pngBase64String}) format(png); // not suited for fnt fonts
      font-weight: normal;
      font-style: normal;
    }`;
    document.head.appendChild(nodeStyle);
    
    const nodeParagraph = document.createElement('p');
    nodeParagraph.style['font-family'] = "testFont";
    nodeParagraph.innerHTML = this.inputText;
    document.getElementById("canvas").appendChild(nodeParagraph);

However, I don't think this is suited for loading a font in fnt format, like the one I have.

That's why I was counting on Pixi to have this kind of functionality with the posibility to load the font from a base64 string and a descriptor file that will have all the details about letters positions. I currently can load a font from my assets using PIXI.BitmapText, but I wanted to load a dynamically created font.

 

Edited July 9, 2020 by Laura

[Laura]

This is another approach I tried to explore using PIXI:

public installFont(fontFileXML, fontPNGBase64String) {
    PIXI.BitmapFont.install(fontFileXML, fontPNGBase64String);
    PIXI.BitmapFont.from("custom", {
      fontFamily: "custom",
      fontSize: 70,
    });

    const title = new PIXI.BitmapText("This is the title", { fontName: "TitleFont" });
  }

From the official documentation, seems like I can do something like that, using an xml string as input data and some texture. However, the engine cannot autodetect the format. I am not even sure if this is supposed to work for my particular case.

[ivan.popelyshev]

> I am not even sure if this is supposed to work

... main goal of pixi is webgl rendering, not loading stuff.

Auxiliary things, like BitmapText, are supported by people like you, who use them, they werent written by geniuses. You shouldn't be afraid to go into that code at least in devtools debugger.

 

Edited July 9, 2020 by ivan.popelyshev

[Laura]

7 hours ago, ivan.popelyshev said:

> I am not even sure if this is supposed to work

... main goal of pixi is webgl rendering, not loading stuff.

Auxiliary things, like BitmapText, are supported by people like you, who use them, they werent written by geniuses. You shouldn't be afraid to go into that code at least in devtools debugger.

 

Turns out, they were  It actually was deceivingly simple.

The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.