{"record":{"id":"ddf047df3403b262","repo":"remotion-dev/remotion","slug":"cannot-interpolate-font-weight-output-expected-normal-bold","errorCode":null,"errorMessage":"Cannot interpolate font weight \"${output}\". Expected \"normal\", \"bold\", or a number between 1 and 1000","messagePattern":"Cannot interpolate font weight \"(.+?)\"\\. Expected \"normal\", \"bold\", or a number between 1 and 1000","errorType":"validation","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/interpolate.ts","lineNumber":976,"sourceCode":"\t\t\tif (lowerCaseOutput === 'normal') {\n\t\t\t\treturn 400;\n\t\t\t}\n\n\t\t\tif (lowerCaseOutput === 'bold') {\n\t\t\t\treturn 700;\n\t\t\t}\n\t\t}\n\n\t\tconst match =\n\t\t\ttypeof output === 'string' ? cssNumberRegex.exec(output) : null;\n\t\tconst value =\n\t\t\ttypeof output === 'number'\n\t\t\t\t? output\n\t\t\t\t: match !== null && match[2] === undefined\n\t\t\t\t\t? Number(match[1])\n\t\t\t\t\t: Number.NaN;\n\t\tif (!Number.isFinite(value) || value < 1 || value > 1000) {\n\t\t\tthrow new TypeError(\n\t\t\t\t`Cannot interpolate font weight \"${output}\". Expected \"normal\", \"bold\", or a number between 1 and 1000`,\n\t\t\t);\n\t\t}\n\n\t\treturn value;\n\t});\n\n\treturn interpolateNumber({\n\t\tinput,\n\t\tinputRange,\n\t\toutputRange: normalizedOutputRange,\n\t\toptions,\n\t});\n};\n\nconst interpolateDiscreteString = ({\n\tinput,\n\tinputRange,","sourceCodeStart":958,"sourceCodeEnd":994,"githubUrl":"https://github.com/remotion-dev/remotion/blob/46a3a6bf13ca367376ff18bbb06dae2e87e0d068/packages/core/src/interpolate.ts#L958-L994","documentation":"interpolate() can animate CSS font-weight values, which must be 'normal' (400), 'bold' (700), or a number 1–1000. If a font-weight string/number in the output range cannot be parsed to a valid weight, a TypeError is thrown listing the accepted formats.","triggerScenarios":"Output range containing strings like '900px', 'thin', '1000.5', or numbers < 1 or > 1000 where font-weight values are expected.","commonSituations":"Typo'd weights ('500px'); using named weights like 'semibold' which aren't CSS-standard; passing rem/px-styled values into font-weight interpolation.","solutions":["Use numeric weights 1–1000 (e.g. '400', '700') or exactly 'normal'/'bold'.","Fix out-of-range numbers to be within 1–1000.","Interpolate the number 400→700 and apply with fontWeight: String(w)."],"exampleFix":"// before\ninterpolate(f, [0,1], ['thin','semibold'])\n// after\ninterpolate(f, [0,1], ['100','600'])","handlingStrategy":"validation","validationCode":"const isValidWeight = (v: string | number) =>\n  v === 'normal' || v === 'bold' ||\n  (typeof v === 'string' && /^\\d+$/.test(v) && +v >= 1 && +v <= 1000) ||\n  (typeof v === 'number' && v >= 1 && v <= 1000);","typeGuard":"const isFontWeight = (v: unknown): v is number | 'normal' | 'bold' =>\n  v === 'normal' || v === 'bold' ||\n  (typeof v === 'number' && v >= 1 && v <= 1000);","tryCatchPattern":"try {\n  interpolate(f, r, weights, {outputType: 'font-weight'});\n} catch (e) {\n  if (e instanceof TypeError) useNumericWeights();\n}","preventionTips":["Use numeric strings ('400','700') or 'normal'/'bold' only.","Avoid CSS keyword weights like 'semibold' (not valid CSS font-weight).","Never pass px/rem values into font-weight interpolation."],"tags":["animation","interpolate","font"],"backgroundTag":"invalid-argument-format","analyzedSha":"46a3a6bf13ca367376ff18bbb06dae2e87e0d068","analyzedAt":"2026-09-18T00:12:20.256Z","contentChangedAt":"2026-09-18T00:12:20.256Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}