remotion-dev/remotion · error

Font weight outputRange must contain only numbers or strings

Error message

Font weight outputRange must contain only numbers or strings

What it means

When `outputType: 'font-weight'` is used with interpolateColors, every entry of the outputRange must be a number or a string (e.g. 400 or 'bold'-style numeric weights as strings). Remotion throws a TypeError if any element is neither, because font-weight interpolation cannot consume color/other values.

Solutions

  1. Replace every outputRange entry with numeric font weights (100-900) or weight strings, e.g. [400, 700].
  2. Remove color strings (hex/rgb/named colors) from the outputRange when using font-weight outputType.
  3. Verify each element's type with outputRange.every((o) => typeof o === 'number' || typeof o === 'string').

Example fix

// before
interpolateColors(progress, [0, 1], ['#000000', '#ffffff'], {outputType: 'font-weight'});
// after
interpolateColors(progress, [0, 1], [400, 700], {outputType: 'font-weight'});
Defensive patterns

Strategy: type-guard

Validate before calling

if (!outputRange.every((o) => typeof o === 'number' || typeof o === 'string')) {
  throw new TypeError('outputRange for font-weight must contain only numbers or strings');
}

Type guard

const isFontWeightRange = (r: unknown[]): r is (number|string)[] =>
  r.every((o) => typeof o === 'number' || typeof o === 'string');

Try / catch

try {
  return interpolateColors(input, inputRange, outputRange, {outputType: 'font-weight'});
} catch (e) {
  if (e instanceof TypeError && e.message.includes('Font weight outputRange')) {
    console.error('outputRange must be numbers/strings, got:', outputRange);
  }
  throw e;
}

Prevention

When it happens

Trigger: Calling `interpolateColors(input, inputRange, outputRange, {outputType: 'font-weight'})` where outputRange contains objects, arrays, null, undefined, booleans, or color strings like '#ff0000'.

Common situations: Reusing an existing color outputRange with outputType switched to 'font-weight', forgetting to replace hex colors with numeric weights, or having a malformed/undefined entry in the array.

Understand the failure class

Background: "Invalid ... format", "must be in format X", "does not look like a ..." — invalid argument format errors across CLI tools and libraries — this error's family across 17 libraries.

Related errors


AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/ad353c93d4ad1429. Report an issue: GitHub.

Appendix: source

Thrown at packages/core/src/interpolate.ts:1329

	assertValidInterpolateOutputOption(options?.output);
	assertValidInterpolateOutputType(options?.outputType);

	if (typeof input !== 'number') {
		throw new TypeError('Cannot interpolate an input which is not a number');
	}

	if (!Array.isArray(outputRange)) {
		throw new Error('outputRange must contain only numbers');
	}

	const outputType = options?.outputType;
	if (outputType === 'font-weight') {
		if (
			!outputRange.every(
				(output) => typeof output === 'number' || typeof output === 'string',
			)
		) {
			throw new TypeError(
				'Font weight outputRange must contain only numbers or strings',
			);
		}

		return interpolateFontWeight({
			input,
			inputRange,
			outputRange,
			options,
		});
	}

	const hasStringOutput = outputRange.some(
		(output) => typeof output === 'string',
	);
	if (outputType !== undefined && outputType !== 'scale' && !hasStringOutput) {
		throw new TypeError(
			`${outputType} outputRange must contain strings with the appropriate CSS units`,

View on GitHub (pinned to 46a3a6bf13)