I don’t have the exact code on hand. Either you can use fonts that are hosted elsewhere (ie on your own server) and link to them or as you load your CSS, you do a search and replace to link the font to the asset url from the project.
So taking a simple example
var Ui = pc.createScript('ui');
Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
Ui.prototype.initialize = function () {
// create STYLE element
var style = document.createElement('style');
// append to head
document.head.appendChild(style);
// You can use an asset reference instead of searching through the asset registry
style.innerHTML = this.css.resource.replace('<YourFontName>', this.app.asset.find('somefont.tff').getFileUrl()) || '';
// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
document.body.appendChild(this.div);
}
If you have the fonts in your project, you ‘have’ to do it this way as you don’t know where they are being served from.
If you want the ‘native’ way. then as mentioned before, you have to host the fonts elsewhere (e.g. dropbox, S3, another webhost) and just link directly to them in CSS.
@will@max
I notice that the editor will refuse the ttf file when uploading, and the status bar will show Invalid asset type.
That means we can not upload the custom font file for most modern browser.
Is there any reason about this?
Uploading fonts is currently only allowed for beta testers of the new UI system. It will be allowed for everyone when we release the UI. For now you could change the extension of the font filename to something else and the font will be uploaded as a binary file.
OK, I see.
As my issue is about font icon, I have use svg instead of it. With svg, I only need to add another javascript file, and add it to the script component, and everything works well.
Hi Yaustar. This replace-tricks sounds awesome and I want to implement it. However, I’m having a hard time to make sense of my font resource. I’ve tried searching for it and using a direct referense to the resouce but It seems to be a png image. What resource type should I use to be able to use font in CSS?
Fonts are being converted to our runtime font format at the moment. If you need them to stay as binary files you could maybe try changing the extension to something else? I’m not sure if it needs to be .ttf in order to reference it in CSS or if you can just use an arbitrary extension and specify that it’s a ttf format in CSS.
Nobody knows ?
(at least via the editor).