Error : Rendering was cancelled

[celest lava]

stack: 'Error: Rendering was cancelled\n' +
' at cancelRender (https://remotionlambda-useast2-9k28im0iz7.s3.us-east-2.amazonaws.com/sites/engagexai/bundle.js:4341:17)\n' +
' at loadFont (https://remotionlambda-useast2-9k28im0iz7.s3.us-east-2.amazonaws.com/sites/engagexai/bundle.js:10387:25)',

useEffect(() => { const loadFontFamily = async () => { try { console.log("captionStyles?.fontFamily", captionStyles?.fontFamily); if (captionStyles?.fontFamily) { loadFont({ family: "fontFamilyNew", url: "https://engagexai-asset.s3.us-east-2.amazonaws.com/GloriousChristmas-BLWWB.ttf" || captionStyles?.fontFamily[captionStyles?.fontWeight || 0]?.url || "https://engagexai-staging.s3.us-east-2.amazonaws.com/popularFonts/Helvetica-Bold.ttf", format: "woff2" || "woff" || "opentype" || "truetype", }).then(() => console.log("Font loaded!")); } } catch (error) { console.error("Error loading font family", error); } }; loadFontFamily(); }, [captionStyles?.fontFamily, captionStyles?.fontWeight]);

[flint lava]

if we remove all the fallbacks ||

it evaluates to :

 loadFont({
            family: "fontFamilyNew",
            url:
              "https://engagexai-asset.s3.us-east-2.amazonaws.com/GloriousChristmas-BLWWB.ttf",
            format: "woff2",
          }).then(() => console.log("Font loaded!"));

which is a mismatch, because .ttf should have truetype as format, not woff2

we made a helper for this: https://www.remotion.dev/docs/fonts-api/load-font

[celest lava]

i did that too

but still the issue persist

loadFont({
family: "fontFamilyNew",
url: "https://engagexai-staging.s3.us-east-2.amazonaws.com/private/b964869a-3d9b-499a-beb5-4d9ca95e7e3b/my_fonts/Playwrite BE VLG/PlaywriteBEVLG-Regular.ttf",
format: "truetype",
}).then(() => {
console.log("Font loaded!");
});

[celest lava]

@flint lava

[icy thicket]

do you get that console log of "font loaded" ?

[celest lava]

in localhost i'm getting but not while rendering @icy thicket

[icy thicket]

ok.
can I ask why you want to fetch the font instead of putting it in the public folder ?

[celest lava]

because we want to increase the number of fonts in future

and we also want to give user a option to upload font

@icy thicket

[flint lava]

I rendered locally and I got this error

so you are running into this error https://stackoverflow.com/questions/8245464/cross-domain-font-face-issues
you need to enable CORS for this URL

I will improve the error message that's being shown here!

[celest lava]

let me provide u cors for this

[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:3000",
"https://app.engagexai.com",
"https://engagexai.com",
"https://staging-app.engagexai.com",
"https://creativex-ai-frontend.vercel.app"
],
"ExposeHeaders": []
}
]

@flint lava these are the cors configuration of bucket

[flint lava]

fact is, your CORS configuration doesn't work though

• we don't always use localhost:3000, can also be 3001, 3002 etc

maybe you need to remove the / at the end

[celest lava]

Hey i have a query. Whenever i am using the wildcard in cors origins i am able to render my video but when i am providing the CORRECT client urls it is not rendering. Is it due to the lambda function which is deployed somewhere else which i have not provided in my cors configuration? @flint lava

[flint lava]

@celest lava maybe because of the / at the end?

it's not lambda specific, these are just the rules for any website

[celest lava]

i tried by removing / but still didn't work but it's working with wildcard

is there any way that we can check that where i can see the requested origin

[flint lava]

@celest lava yes, console.log(window.location.origin)

also make sure to add --log=verbose during render

the easiest way to debug I think:

open any react app, can be remotion studio, which is hosted on localhost:3000

in the console, execute await fetch(myUrl)

you will get a good error message, read carefully

[celest lava]

thanks for the help i'll do that @flint lava