Font loading errors

Render timeout when loading Google Fonts

When using @remotion/google-fonts, you may encounter timeout errors like:

diff
- A delayRender() "Fetching Inter font {"style":"normal","weight":"100","subset":"cyrillic-ext"}" was called but not cleared after 58000ms.

Problem

By default, loadFont() attempts to load all available font weights and character subsets, which can cause timeouts.

Solution

Only load the specific font weights and character subsets that your project needs:

tsx
import {loadFont} from '@remotion/google-fonts/Inter';
// ❌ Avoid: Loading all weights and subsets
loadFont();
// ✅ Recommended: Load only required weights and subsets
loadFont('normal', {
  subsets: ['latin'],
  weights: ['400', '700'], // Only load regular (400) and bold (700)
});