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 subsetsloadFont();// ✅ Recommended: Load only required weights and subsetsloadFont('normal', {subsets: ['latin'],weights: ['400', '700'], // Only load regular (400) and bold (700)});