How to add international language text to video

Quite often we get questions about using languages or character sets other than English or European when editing videos using Shotstack.

A large percentage of our customers do not use English or European based languages, and other customers want to translate the titles or add subtitles in multiple foreign languages, which is a feature Shotstack can handle with ease.

Working with international fonts when video editing

If you're doing video edits with non European languages you might notice some characters are missing or are replaced by a small rectangle. Also known as tofu, it indicates the font used does not contain the specific glyph.

The only way to overcome this limitation is to use a font that supports the specific characters so you can reach your local or international audience.

If this is the first time you'll be working with the HTML asset type and fonts doing Shotstack edits or you just need to refresh your knowledge, please visit our HTML and custom fonts guide. The previous tutorial will give you a good understanding on styling text elements and preparing fonts for use with Shotstack.

How to find international language fonts on Google Fonts

You can use Google Fonts to find the perfect font to render text in your video edit. On the Google Fonts website you will notice a language selector dropdown filter:

You could also start typing in the Type something input so the font preview will use your actual sentence or words.

Contrary to how the browsers interpret @font-face fonts, Shotstack uses the actual TTF file to style the text. One you find a specific font, download the font family, extract the Zip contents and upload the font file to your own server or to publicly accessible cloud storage. You will pass the URL to this font file in the JSON configuration file for your edit.

For our guide we'll work with a single timeline, with black background and a soundtrack, displaying centered text rendered with the help of the HTML asset.

We'll start with the English version and simply output a "Shotstack supports the English language" message styled using CSS.

Here's our JSON video edit in the English language:

{
    "timeline": {
      "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#45dae8",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstack supports the English language</p>",
                            "css": "p { font-family: 'Open Sans'; color: #ffffff; font-size: 32px; text-align: center; }",
                            "width": 820,
                            "height": 100
                        },
                        "start": 0,
                        "length": 10,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

For this timeline we defined an array containing a single custom font that will be downloaded by the Shotstack API and used for the HTML assets:

"fonts": [
    {
        "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
    }
],

In the CSS we specify the font font-family: 'Open Sans';. This will serve as our template and we will change the font source, CSS and HTML text to create the same video in multiple languages.

Here is the final result in the English language:

How to add Arabic text to videos

On the Google Fonts page you can filter by Arabic language:

For this example we downloaded Cairo and uploaded it to our public Amazon S3 bucket.

The first change we'll do is update the fonts array of the timeline with the new font:

"fonts": [
    {
        "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Cairo-Regular.ttf"
    }
]

Then we update the font-family attribute to the new font:

"css": "p { font-family: 'Cairo', serif; color: #ffffff; font-size: 32px; text-align: center; }"

Finally we update our HTML text to use the translated text. This is the full JSON config file for using Arabic in your video edits:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Cairo-Regular.ttf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#6cc6ee",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>يدعم Shotstack اللغة العربية</p>",
                            "css": "p { font-family: 'Cairo'; color: #ffffff; font-size: 32px; text-align: center; }",
                            "width": 820,
                            "height": 100
                        },
                        "start": 0,
                        "length": 10,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

Here is the video rendered using Arabic text:

The process for the remaining videos is the same, we replace the font, CSS and text for each language. Just for creative effect we'll set a different background colour for each video too.

How to add Chinese text to videos

On the Google Fonts page filter by Chinese (Honk Kong), Chinese (Simplified) or Chinese (Traditional). For our Chinese video edit we use the Noto Sans SC font and again upload it to our S3 bucket.

This is the full JSON file for using Chinese text in your video edits:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/NotoSansSC-Regular.otf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#91a8eb",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstack支持中文</p>",
                            "css": "p { font-family: 'Noto Sans SC'; color: #ffffff; font-size: 32px; text-align: center; }",
                            "width": 820,
                            "height": 100
                        },
                        "start": 0,
                        "length": 10,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

And this is how our Chinese video ends up looking:

How to add Japanese text to videos

To add Japanese text to our video edit we chose the Noto Sans JP font.

The full JSON for adding Japanese text to your video is below:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/NotoSansJP-Regular.otf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#b999f5",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstackは日本語をサポートしています</p>",
                            "css": "p { font-family: 'Noto Sans JP'; color: #ffffff; font-size: 32px; text-align: center; }",
                            "width": 820,
                            "height": 100
                        },
                        "start": 0,
                        "length": 10,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

Here is the video with Japanese text applied:

How to add Thai text to videos

To add Thai text to our video edit we downloaded the Sarabun to our S3 Bucket.

The full JSON for adding Thai text to your video is below:

{
    "timeline": {
        "fonts": [
            {
                "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/Sarabun-Regular.ttf"
            }
        ],
        "soundtrack": {
            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/fireworks.mp3",
            "effect": "fadeOut"
        },
        "background": "#da8afc",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "html": "<p>Shotstack รองรับภาษาไทย</p>",
                            "css": "p { font-family: 'Sarabun'; color: #ffffff; font-size: 32px; text-align: center; }",
                            "width": 820,
                            "height": 100
                        },
                        "start": 0,
                        "length": 10,
                        "transition": {
                            "in": "fade",
                            "out": "fade"
                        }
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "resolution": "hd"
    }
}

The final result for Thai tet on video:

A note about using RTL fonts

Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi are the most widespread RTL writing systems. In order for the text to be displayed correctly if using any of these languages, you may need to set the direction within the HTML. You can do this using the dir HTML attribute:

"html": "<p dir='rtl'>مرحبا بالعالم</p>"

The direction can also be controlled via CSS instead of adding the dir HTML attribute to the paragraph element.

"css": "p { direction: rtl; }

Conclusion

You should now have a firm grasp of how you can create text either in your native language or the language of your audience. Because everything in Shotstack is created using JSON and the programming language of your choice you can easily build automated translation and subtitles in to your app by simply changing a few variables. If you haven't already you can sign up to the API and give these examples a try.