javascriptaframe

A-Frame loading custom font in assets not working

I am using this build of aframe: https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js

I have setup a scene in aframe and loaded it onto my webserver. Via the "a-asset-item" i can load and display .objs .mp3 and images(.png) with #id just fine.

The only thing that's not seeming to work are custom fonts made with hiero. I converted a font into a .fnt and a .png(fontimage) and loaded it like so into the code:

<a-assets>

        <a-asset-item id="akzidenz" src="assets/akzidenz.fnt"></a-asset-item>
        <a-asset-item id="akzidenzimage" src="assets/akzidenz.png"></a-asset-item>
        
<a-assets>

Then I called the font in an element like this.

<a-text id="title" position="0 2 -2" side="double"
        font="#akzidenz"
        fontimage="#akzidenzimage"
        value="This is a Title">
      </a-text>

When I open up the page on my website this error is displayed in the javascript console:

components:text:error Error loading font  #akzidenz

3browser.js:111 components:text:error Error: error parsing font malformed file -- no <pages> element
    at Object.callback (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:58:1408)
    at a (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:1112)
    at o (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:980)
    at XMLHttpRequest.t (https://rawgit.com/aframevr/aframe/c9817f2/dist/aframe-master.min.js:183:401) 
3(index):1 Uncaught (in promise) Error: error parsing font malformed file -- no <pages> element
    at Object.callback (browser.js:71)
    at a (index.js:62)
    at o (index.js:129)
    at XMLHttpRequest.t (index.js:68)

The text is not displayed. Every other kind of file in assets works. Before I made this, I started out writing examples in glitch and there i pasted the cdn-link directly into it. This worked out.

<a-text id="title" position="0 2 -2" side="double"
        font="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.fnt?1512042049508"
        fontimage="https://cdn.glitch.com/1eed6da6-c9da-46d7-bb30-b441a645ff43%2Fakzidenz.png?1512042052757"
        value="This is a Title">
      </a-text>

I also tried embedding the direct link like http://www.example.com/.../assets/akzidenz.fnt Then I got a permission error.

Can anyone help me out with this issue? Thanks in advance.

Solution

  • If you haven't done it already, run a local server for your project. Even if you had everything alright it won't work without a running server, as assets may not be served properly. Follow this instructions to start your dev server and view your project.

    I did a little research and it seems (I'm not 100% sure) that for now you cannot preload your font in a-assets. A-Frame expects to load your font from XML format (or a string to parse) - by providing it the id of your resource it does't seem to get the data it needs. Here is the line that throws your error:

    data = data.toString()
var xmlRoot = parseFromString(data)
var pageRoot = xmlRoot.getElementsByTagName('pages')[0]
if (!pageRoot)
  throw new Error('malformed file -- no <pages> element')

    If you pass it a directory (remember about local server) it will work correctly, as it will receive a string and then parse it to XML.

    You can definately preload the img's though, as stated here.

    My final working code:

    <a-assets>
  <img id="akzidenzimg" src="/assets/akzidenz.png">
</a-assets>
<a-sky color="#CCC"></a-sky>
<a-text id="title" position="0 2 -2" side="double"
    font="/assets/akzidenz.fnt"
    fontimage="#akzidenzimg"
    value="This is a Title">
</a-text>

    My folder structure:

    .
+-- index.html
+-- assets
|   +--akzidenz.fnt
|   +--akzidenz.png