Custom fonts for HTML elements?

Help & Support
,
1

Hi! I am currently working on a project that requires the use of overlaid HTML elements for text input. For stylistic reasons, I would like to use a custom font that isn’t hosted on any websites. Unfortunately however, I cannot get the URL of the source font asset inorder to use it in my CSS, and when I try the URL of the regular font asset, it doesn’t render the font. Any assistance would be appreciated.

2

Hey @lifeofpain! :wave:

I’ve dealt with a similar issue when working with HTML UI over WebGL content. If your font isn’t hosted online and you’re using PlayCanvas assets, you can load the font dynamically using a Blob URL. Here’s a quick way to do it:

Upload your .ttf or .woff font file as an asset in PlayCanvas.

In your script, get the font asset file and convert it into a blob URL like this:

const fontAsset = app.assets.find('YourFontFile.ttf');
const fontUrl = URL.createObjectURL(fontAsset.resource);

const style = document.createElement('style');
style.innerHTML = `
  @font-face {
    font-family: 'CustomFont';
    src: url(${fontUrl});
  }

  .custom-font {
    font-family: 'CustomFont', sans-serif;
  }
`;
document.head.appendChild(style);

document.head.appendChild(style);
Then just apply the class custom-font to your HTML elements. This should render your custom font correctly even if it’s not hosted externally.

Hope this helps! Let me know if you run into any trouble setting it up. :+1:

3

Thank you so very much, I was struggling a lot with this.