bug: Roboto__900 not registered when rich-text uses font weight 900 — "Font not registered for Roboto__900"

[najidev]

Issue Summary

Rich-text clips that use the font family Roboto with weight 900 cause the SDK to throw during edit load, even when Roboto (or Roboto 900) is provided in timeline.fonts or when using the built-in Roboto assets.## Error
Failed to render rich text frame: Error: Failed to layout text: Text shaping failed: Failed to shape text with font "Roboto": Font not registered for Roboto900

Stack trace (relevant frames)

renderFrame shotstack-studio.es.js:49493
renderFrame shotstack-studio.es.js:49758
load shotstack-studio.es.js:49733
createPlayer shotstack-studio.es.js:52905
reconcile shotstack-studio.es.js:52905
reconcileInitial shotstack-studio.es.js:52833
initializeFromDocument shotstack-studio.es.js:53321
load shotstack-studio.es.js:53301

Expected Behavior

No response

Actual Behavior

No response

Steps to Reproduce

No response

Technical Analysis

No response

Possible Solutions

No response

Tested Environment

Environment

• Package: @shotstack/shotstack-studio@2.1.2
• Context: Loading an edit (template) fetched from an API. The edit has timeline.tracks with clips whose asset.type is rich-text, asset.font.family is "Roboto", and asset.font.weight is 900.

Steps to reproduce

1. Create an edit JSON with at least one rich-text clip using font: { family: "Roboto", weight: 900, ... }.
2. Optionally include Roboto in timeline.fonts (e.g. { src: "https://fonts.gstatic.com/s/roboto/..." }).
3. Run const edit = new Edit(editConfig); await edit.load();.
4. The error is thrown during load when the SDK tries to render the rich-text frame.

Expected behavior

• Either Roboto weight 900 is registered when Roboto (variable or static) is listed in timeline.fonts, or
• The built-in Roboto asset (if any) is used for weight 900 so that Roboto__900 is registered and rich-text renders without error.

Notes

• Commit #53 (“fix: update Roboto font path”) may be related; the issue still occurs in 2.1.2 when the edit comes from an API payload that uses Roboto with weight 900.

Additional Context

No response

[dazzatronus]

Am not able to reproduce this. @najidev are you still experiencing this issue in the latest version?

[najidev]

Hi @dazzatronus
Thank you for the follow up,
I installed the latest version 2.4.0, and I still encounter the same issue

Failed to render rich text frame: Error: Failed to layout text: Text shaping failed: Failed to shape text with font "Open Sans": Font not registered for Open Sans__900
    renderFrame shotstack-studio.es.js:51462
<anonymous code>:1:145535
    overrideMethod <anonymous code>:1
    error intercept-console-error.ts:42
    renderFrame shotstack-studio.es.js:52058

I'm using nextjs

My packages - package-lock.json has the following packages:

      "dependencies": {
        "@floating-ui/react-dom": "^2.1.1",
        "@shotstack/shotstack-studio": "^2.4.0",
        "@tanstack/react-query": "^5.0.0",
        "@types/node": "20.11.10",
        "@use-gesture/react": "^10.3.0",
        "clsx": "^2.1.1",
        "date-fns": "^4.1.0",
        "mammoth": "^1.8.0",
        "next": "16.1.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-markdown": "^10.1.0",
        "react-pdf": "^9.1.0",
        "react-select": "^5.8.0",
        "react-select-async-paginate": "^0.7.4",
        "react-shepherd": "^6.1.1",
        "react-toastify": "^11.0.5",
        "react-use-websocket": "^4.8.1",
        "reactjs-popup": "2.0.6",
        "rehype-raw": "^7.0.0",
        "remark-gfm": "^4.0.1",
        "sharp": "^0.33.4",
        "sonner": "^2.0.7",
        "swr": "2.2.4",
        "typescript": "5.3.3"
      },

My code:

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useParams, useSearchParams } from "next/navigation";
import Link from "next/link";
import auth from "@/hooks/useUser";
import { Edit, Canvas, Controls, Timeline, UIController } from "@shotstack/shotstack-studio";

const API_BASE =
  typeof process !== "undefined"
    ? process.env.NEXT_PUBLIC_API || process.env.API
    : "";

export default function VideoPreviewPage() {
  const params = useParams();
  const searchParams = useSearchParams();
  const videoId = params?.video as string;
  const uuidFromQuery = searchParams?.get("uuid");

  const [status, setStatus] = useState<"loading" | "error" | "ready">("loading");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const studioRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<HTMLDivElement>(null);
  const cleanupRef = useRef<(() => void) | null>(null);

  const loadPreview = useCallback(async () => {
    const uuid = uuidFromQuery;
    if (!uuid || !API_BASE) {
      setErrorMessage(
        uuid ? "API base URL is not configured." : "Video UUID is required. Open preview from the editor."
      );
      setStatus("error");
      return;
    }

    setStatus("loading");
    setErrorMessage("");

    try {
      const token = auth.getToken();
      const response = await fetch(`${API_BASE}/video/${uuid}/preview`, {
        method: "GET",
        headers: token
          ? { Authorization: `bearer ${token.access_token}` }
          : {},
        credentials: "include",
      });

      if (!response.ok) {
        const data = await response.json().catch(() => ({}));
        throw new Error(
          data?.message || data?.error || `Failed to load preview (${response.status})`
        );
      }

      const raw = await response.json();
      // API may return { timeline, output } or { data: { timeline, output } }
      const template = raw;
      if (!template?.timeline || !template?.output) {
        throw new Error(
          "Invalid preview response: expected { timeline, output } (or { data: { timeline, output } })."
        );
      }
      // Avoid "Font not registered for Roboto__900": use a template font instead of Roboto
      //(template.timeline);
      // Shotstack v2 schema is strict: only timeline and output (no extra keys at root)
      const editConfig = {
        timeline: template.timeline,
        output: template.output,
      };

      const edit = new Edit(editConfig);
      await edit.load();

      const canvas = new Canvas(edit);
      await canvas.load();

      const timelineContainer = timelineRef.current;
      if (!timelineContainer) {
        throw new Error("Timeline container not found.");
      }
      const timeline = new Timeline(edit, timelineContainer, { resizable: true });
      await timeline.load();

      const controls = new Controls(edit);
      await controls.load();

      cleanupRef.current = () => {
        try {
          timeline?.dispose?.();
          canvas?.dispose?.();
        } catch (_) { }
        cleanupRef.current = null;
      };

      setStatus("ready");
    } catch (err) {
      let message = "Failed to load video preview.";
      if (err instanceof Error) {
        message = err.message;
        // Surface Zod/validation errors from Shotstack SDK
        const issues = (err as { issues?: unknown[] }).issues;
        if (Array.isArray(issues) && issues.length > 0) {
          message += " " + JSON.stringify(issues);
        }
      }
      setErrorMessage(message);
      setStatus("error");
    }
  }, [uuidFromQuery]);

  useEffect(() => {
    loadPreview();
    return () => {
      cleanupRef.current?.();
    };
  }, [loadPreview]);

  if (status === "error") {
    return (
      <div className="min-h-screen bg-[var(--dashboard-bg)] flex flex-col items-center justify-center p-6">
        <div className="rounded-xl border border-[var(--normal-border-color)] bg-[var(--card-bg)] p-8 max-w-md text-center">
          <h1 className="text-lg font-semibold text-[var(--solid-text)] mb-2">
            Preview unavailable
          </h1>
          <p className="text-sm text-[var(--muted-text)] mb-6">
            {errorMessage}
          </p>
          <Link
            href={videoId ? `/videos/${videoId}` : "/home"}
            className="inline-flex items-center justify-center rounded-lg border border-[var(--normal-border-color)] bg-[var(--button-bg)] px-4 py-2 text-sm font-medium text-[var(--solid-text)] hover:opacity-90"
          >
            Back to editor
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--dashboard-bg)] flex flex-col">
      <header className="flex items-center justify-between gap-4 px-4 py-3 border-b border-[var(--normal-border-color)] bg-[var(--card-bg)]">
        <div className="flex items-center gap-3">
          <Link
            href={videoId ? `/videos/${videoId}` : "/home"}
            className="text-sm font-medium text-[var(--muted-text)] hover:text-[var(--solid-text)]"
          >
            ← Back to editor
          </Link>
          <span className="text-sm text-[var(--muted-text)]">|</span>
          <span className="text-sm font-medium text-[var(--solid-text)]">
            Shotstack preview
          </span>
        </div>
      </header>

      <div className="flex-1 flex flex-col overflow-hidden relative">
        {status === "loading" && (
          <div className="absolute inset-0 z-10 flex items-center justify-center bg-[var(--dashboard-bg)]/80">
            <div className="flex flex-col items-center gap-3">
              <div className="h-8 w-8 rounded-full border-2 border-[var(--normal-border-color)] border-t-[var(--solid-text)] animate-spin" />
              <p className="text-sm text-[var(--muted-text)]">
                Loading preview…
              </p>
            </div>
          </div>
        )}
        <div
          ref={studioRef}
          data-shotstack-studio
          className="flex-1 min-h-0 w-full"
        />
        <div
          ref={timelineRef}
          data-shotstack-timeline
          className="border-t border-[var(--normal-border-color)] bg-[var(--card-bg)] overflow-hidden shrink-0"
          style={{ height: 300 }}
        />
      </div>
    </div>
  );
}

Please let me know if you need any further info for debugging

[dazzatronus]

Thanks @najidev that's very helpful. I've tried to reproduce this using the same packages you have but am not getting there.

This sandbox contains a repro of your setup: https://codesandbox.io/p/github/shotstack/shotstack-studio-sdk-demos/repro/issue-76-najidev. Your repro is in the nextjs folder you can ignore the other frameworks.

This is the app: https://76hf8t-3000.csb.app/

Can you take a look whether this setup aligns with yours? I may have missed something.