Sign in to follow this  
Laura

Load BitmapFont from blob or data url

Recommended Posts

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 by Laura

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by jonforum

Share this post


Link to post
Share on other sites

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 by Laura

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.