Fonts are not loaded as expected

Here is the json:

{
    "timeline":
    {
        "cache": false,
        "fonts":
        [
            {
                "src": "https://cdn.jsdelivr.net/npm/@expo-google-fonts/noto-sans@0.2.2/NotoSans_400Regular.ttf"
            },
            {
                "src": "https://surreal.oss-accelerate.aliyuncs.com/movio/font/prod/Cinzel-Medium.ttf?OSSAccessKeyId=LTAI4FhUZsa1YYumWbTWusLN&Expires=1656324465&Signature=g6J1Ru2kSHYVPCfL3qF6wq%2F0Qmw%3D"
            }
        ],
        "tracks":
        [
            {
                "clips":
                [
                    {
                        "asset":
                        {
                            "css": "pre { white-space: pre-wrap;word-break: break-word;font-family: Cinzel Medium, NotoSans;font-size: 100px;color: #FFFFFF;font-weight: bold;font-style: normal;text-decoration: none;text-align: left;margin-left: 116.6064453125px;line-height: 120px;}",
                            "html": "<pre>Thanks for\n watching</pre>",
                            "type": "html",
                            "width": 1299.27734375,
                            "height": 276.22222222222223
                        },
                        "scale": 1.0,
                        "start": 0.0,
                        "length": 7.69,
                        "offset":
                        {
                            "x": -0.0838,
                            "y": -0.0097
                        },
                        "position": "center",
                        "transform":
                        {
                            "rotate":
                            {
                                "angle": 0.0
                            }
                        },
                        "transition":
                        {
                            "in": "slideLeft"
                        }
                    }
                ]
            }
        ],
        "background": "#6099a6"
    },
    "output":
    {
        "format": "mp4",
        "size":
        {
            "width": 1920,
            "height": 1080
        },
        "aspectRatio": "16:9",
        "thumbnail":
        {
            "capture": 1,
            "scale": 0.5
        }
    }
}

What we got is:

But the font we expect is:

image

Could you plz tell us why is that happened, and how to solve this problem.

You just need to make sure the font name in the CSS is wrapped in quotes. Because it is part of the JSON you can use single quotes:

font-family: 'Cinzel Medium'

Or you can use double quotes and escape them:

font-family: \"Cinzel Medium\"

1 Like

Really appreciate for the solution! That works for me.

1 Like