How to load fonts hosted on GitHub

Shotstack API
1

I’m trying to load custom fonts that are hosted on GitHub. Specifically the Google fonts here: https://github.com/google/fonts

I’ve tried both using the source api to have the files moved from git to hosted with shotstack and using the github url specifically (ex. fonts/ofl/narnoor/Narnoor-Regular.ttf at main · google/fonts · GitHub) but neither seem to work. Is the only option to download all of the files and upload? I thought the Github urls were a public option.

2

You just need the raw URL of the TTF file and the font family name.

For the Narnoor-Regular font in your example, the URL looks like this:
https://github.com/google/fonts/raw/main/ofl/narnoor/Narnoor-Regular.ttf

Which is different from the web page URL:
https://github.com/google/fonts/blob/main/ofl/narnoor/Narnoor-Regular.ttf

The only difference is the actual TTF file has raw instead of blob.

Once you have the TTF file URL you can use it in the JSON body like this:

{
    "timeline": {
        "background": "#000000",
        "fonts": [
            {
                "src": "https://github.com/google/fonts/raw/main/ofl/narnoor/Narnoor-Regular.ttf"
            }
        ],
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Hello World</p>",
                            "css": "p { font-family: 'Narnoor'; color: #ffffff; font-size: 80px; text-align: center; }",
                            "width": 800,
                            "height": 200
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

In the CSS, you need to use the correct font-family name, in this case it is just Narnoor. Sometimes the family name is less obvious so you might have to download the font and open it in your OS font viewer.

3

Thanks! That is a fairly easy fix.