remotion-dev/remotion · error · Error

The font ${meta.fontFamily} does not have a style ${style}

Error message

The font ${meta.fontFamily} does not have a style ${style}

What it means

Thrown by @remotion/google-fonts `loadFonts` when the requested `style` argument does not exist as a key in `meta.fonts` for the chosen font family. Each Google Font family advertises a fixed set of styles (commonly 'normal' and sometimes 'italic'); requesting one that the family does not provide is rejected.

Source

Thrown at packages/google-fonts/src/base.ts:112

	) {
		throw new Error(
			'Loading Google Fonts without specifying weights and subsets is not supported in Remotion v5. Please specify the weights and subsets you need.',
		);
	}

	const promises: Promise<void>[] = [];
	const styles = style ? [style] : Object.keys(meta.fonts);

	let fontsLoaded = 0;

	for (const style of styles) {
		// Don't load fonts on server
		if (typeof FontFace === 'undefined') {
			continue;
		}

		if (!meta.fonts[style]) {
			throw new Error(
				`The font ${meta.fontFamily} does not have a style ${style}`,
			);
		}
		const weights = options?.weights ?? Object.keys(meta.fonts[style]);
		for (const weight of weights) {
			if (!meta.fonts[style][weight]) {
				throw new Error(
					`The font ${meta.fontFamily} does not  have a weight ${weight} in style ${style}`,
				);
			}
			const requestedSubsets: string[] =
				options?.subsets ?? Object.keys(meta.fonts[style][weight]);
			const availableSubsetKeys = Object.keys(meta.fonts[style][weight]);
			const subsets = [
				...new Set(
					requestedSubsets.flatMap((requestedSubset) =>
						resolveFontSubsetKeys({
							availableSubsetKeys,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Inspect `Object.keys(meta.fonts)` for the family to see which styles are valid, then pass one of those.
2. Omit the `style` argument entirely to load all available styles for the family.
3. Switch to a font family that actually ships the style you need.

Example fix

// before
loadFonts(meta, 'italic', {weights: ['400'], subsets: ['latin']});

// after
const style = Object.keys(meta.fonts).includes('italic') ? 'italic' : 'normal';
loadFonts(meta, style, {weights: ['400'], subsets: ['latin']});

function pickStyle(meta: FontInfo, wanted: string): string | undefined {
  const available = Object.keys(meta.fonts);
  return available.includes(wanted) ? wanted : undefined;
}

const style = pickStyle(meta, 'italic');
if (!style) throw new Error(`Style 'italic' not available; have: ${Object.keys(meta.fonts).join(', ')}`);

function styleExists(meta: FontInfo, style: string): boolean {
  return Object.prototype.hasOwnProperty.call(meta.fonts, style);
}

When it happens

Trigger: Calling `loadFonts(meta, 'italic', ...)` for a family whose metadata only contains a 'normal' key, or passing a style string with a typo such as 'normaL'. The check is `!meta.fonts[style]`.

Common situations: Hard-coding 'italic' for a font that has no italic cut; switching font families without updating the style argument; passing the wrong `meta` object for the style you want.

Related errors

• The font ${meta.fontFamily} does not have a weight ${weight
• weight: ${weight} subset: ${subset} is not available for '${
• Expected a URL string but received ${url === undefined ? 'un
• Could not automatically derive font format from extension: $
• loadFont() requires an object as its argument, but received

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/87b3d21143fbfed0. Report an issue: GitHub.