Skip to content

bug: font fallback and pre-configured font inconsistencies between Studio SDK and Edit API #11

@dazzatronus

Description

@dazzatronus

Issue Summary

When referencing key fonts in the Edit without explicitly referencing them in the fonts array this leads to different outputs between the Studio SDK and Edit API.

Expected Behavior

When a font is not explicitly referenced in the Edit the expected output is that the font isn't successfully rendered and the default font fallback is used. However, when pre-configured fonts from the Edit API are used the Studio should automatically use these fonts to maintain output parity.

Actual Behavior

Currently the fallback font is used correctly when the font isn't loaded. However, this also occurs with pre-configured fonts in the Edit API and leads to the text asset being rendered differently between the Studio and Edit API.

Steps to Reproduce

  1. Load an Edit (example below) with a text asset pointing to a non-existent font reference.
  2. Render the same Edit with the Edit API
  3. Review the render output and Studio preview
Edit example
{
  "timeline": {
    "background": "#000000",
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "text",
              "text": "WELCOME TO SHOTSTACK",
              "font": {
                "family": "Movie Letters",
                "color": "#ffffff",
                "size": 80
              },
              "alignment": {
                "horizontal": "center"
              },
              "width": 720,
              "height": 212
            },
            "start": 0,
            "length": 10,
            "transition": {
              "in": "fade",
              "out": "fade"
            },
            "fit": "none",
            "scale": 1,
            "offset": {
              "x": -0.206,
              "y": -0.138
            },
            "position": "center",
            "effect": "zoomIn"
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://templates.shotstack.io/hello-world-title-video/aa5d068a-c2c2-4cff-800a-15cacf9a8809/earth.mp4",
              "trim": 5,
              "volume": 1
            },
            "start": 0,
            "length": 10,
            "transition": {
              "in": "fade",
              "out": "fade"
            },
            "position": "center",
            "scale": 1
          },
          {
            "asset": {
              "type": "audio",
              "src": "https://templates.shotstack.io/hello-world-title-video/47474436-7f03-48fd-990d-f00b04b339b3/source.mp3",
              "volume": 1,
              "effect": "fadeOut"
            },
            "start": 0,
            "length": 10
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "fps": 25,
    "size": {
      "width": 1280,
      "height": 720
    }
  }
}

Technical Analysis

Currently the following fonts are preconfigured in the Edit API:

  • Arapey-Regular.ttf
  • ClearSans-Regular.ttf
  • DidactGothic-Regular.ttf
  • Montserrat-ExtraBold.ttf
  • Montserrat-SemiBold.ttf
  • MovLette.ttf
  • OpenSans-Bold.ttf
  • PermanentMarker-Regular.ttf
  • Roboto-BlackItalic.ttf
  • SueEllenFrancisco.ttf
  • UniNeue-Bold.otf
  • WorkSans-Light.ttf

Possible Solutions

Option 1

Add the preconfigured fonts from the Edit API to the Studio SDK and automatically load these when referenced, regardless of font reference in the Edit.

Tested Environment

  • Studio Version: v1.1.2
  • OS: Ubuntu 24.04.2 LTS
  • Browser: Brave v1.78.94

Additional Context

Related issue: #8 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions