A frame adding a .ttf font into a mixin for text

I'm trying to use the Georgia font in A-frame. I found and downloaded it and then uploaded it into assets. It's a .ttf file type, so I'm not sure if that's why it isn't working, but when I try and use it in my code, it doesn't work.

this is the code I tried within asset tags:

a-asset-item id="georgia.ttf" src="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.ttf?v=1619266271805">

a-mixin id="texts" text="color: #303030; width: 1.8; lineHeight: 60; align: center; baseline: top; wrapCount: 12; font: georgia.ttf">

Solution

using fonts in 3D is not that simple. Every single character must be rerendered using geometry or textures. I strongly recommend you read this entire text A-Frame documentation page or at least the marked paragraph. You can't use standard font file types.

In A-Frame they decided to go with the following formats:

MSDF
SDF

Those are "images" of every single letter in a specific font with a .json file describing that image.

Example of MSDF image file (Montserrat-Italic):

Working Example:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
        <style>
        
        </style>
    </head>
    <body>
        <a-scene>
        <a-text value="hello in your font"
                position="0 1.6 -1"
                color="red"
                negate="false"
                font="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia-msdf.json"
                font-image="https://cdn.glitch.com/b4adbd04-68ad-4b83-8ff1-0cfe5e5c37ec%2Fgeorgia.png?v=1619693337804">
          </a-text>
          <a-text value="hello in regular"
                position="0 2 -1"
                color="red">
          </a-text>
        </a-scene>
    </body>
</html>