Custom font with dynamic text in A-Frame

Question

I'm building an 8th wall AR Effect in which a user1 can send a message to user2 and user2 will see the message appear written in the sky on their mobile device. Here's a rough demo of the experience: https://www.dropbox.com/s/z7bibh0g3biqnfp/AIRMAILAR_01.mp4?dl=0

I'm using A-Frame to build this but I'm having a problem. I want to use a custom font to display the message, but I can't figure out how to make the text dynamic and display in a custom font. I can make the text dynamic while using a default font, and I can use a custom font on a non-dynamic text string, but I can't figure how to make both the text dynamic and display in a custom font :)

Here's my code that enables custom font usage. This makes use of a .json font file.

<a-text position="-3 5 -5" rotation="20 0 0" color="#FFFFFF" wrap-count="80" scale="2 2 2" text-geometry="font: #dots; value: query-text;" bevelEnabled="false"></a-text>

And here's the .js that carries text over from my website to the AR experience.

<script>
      AFRAME.registerComponent('query-text', {
        init: function () {
          this.el.addEventListener('loaded', () => {
            // Parse the URL
            let urlParams = new URLSearchParams(window.location.search);

            // Get the value of the 'text' parameter, decode it, and set it as the value of the <a-text> entity
            if (urlParams.has('text')) {
              let text = decodeURIComponent(urlParams.get('text'));
              this.el.setAttribute('value', text);
            }
          });
        }
      });
    </script>

But the above .js only works with this a-frame code that doesn't allow use of a custom font:

<a-text id="textEntity" query-text position="-3 5 -5" rotation="20 0 0" color="#FFFFFF" font="https://cdn.aframe.io/fonts/DejaVu-sdf.fnt" wrap-count="80" scale="4 4 4"></a-text> 

Any suggestions on how I can make use of dynamic text that can also use a custom font? Thanks!