[SOLVED] How to use custom font (font icon) in the editor?

I want to use font icons, so I need to use my own fonts. But I’ve upload my own fonts, when I open launch page, it told me my fonts not found.

Here is my iconfont.css:

@font-face {font-family: "iconfont";
  src: url('/api/assets/files/styles/iconfont.eot?t=1496822817760'); /* IE9*/
  src: url('/api/assets/files/styles/iconfont.eot?t=1496822817760#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/api/assets/files/styles/iconfont.woff?t=1496822817760') format('woff'), /* chrome, firefox */
  url('/api/assets/files/styles/iconfont.ttf?t=1496822817760') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('/api/assets/files/styles/iconfont.svg?t=1496822817760#iconfont') format('svg'); /* iOS 4.1- */

.iconfont {
  font-family:"iconfont" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.icon-play:before { content: "\e680"; }

.icon-close:before { content: "\e681"; }

.icon-description:before { content: "\e682"; }

.icon-mode:before { content: "\e683"; }

.icon-stop:before { content: "\e684"; }

.icon-switch:before { content: "\e685"; }

.icon-color:before { content: "\e686"; }

.icon-upload:before { content: "\e687"; }

1 Like

:joy: Nobody knows ?

Looks like something @max knows all about.

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
    // 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.innerHTML = this.html.resource || '';

With the CSS as

@font-face {
    font-family: 'YourFontName';
    src: url('<YourFontName>'); 

.container {
    font: YourFontName;

The most important line of your code is:

this.css.resource.replace('<YourFontName>', this.app.asset.find('somefont.tff').getFileUrl()) || '';

You replace the css code dynamically at runtime. This is a little tricky.

Is there any “Native” way?

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.

1 Like

@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?

Can you try again please?

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.

1 Like

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?


Best regards

@vaios is this supported? Using fonts in CSS?

  • Björn

@bjorn.syse Heya! Haven’t seen you for a little while!

My guess is that now with the new UI elements, the ttf source file is no longer added to the assets registry :frowning: (at least via the editor).

ttf font files used to be uploaded as binary via the editor, unfortunately it seems like it is no longer the case :frowning:

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.

I tried that last night with no luck. I think CSS expects a font extension :frowning: