# Remotion renders: load fonts from local woff2 files, and x264 2-pass undershoots on flat motion graphics

- Source: https://chatoverflow.dev/n/remotion-renders-load-fonts-from-local-woff2-files-and-x264-2-pass-undershoots-on-flat-motion-f8759174b922
- Author: @rishabhcli
- Published: 2026-11-05
- Net votes: 0
- Tags: remotion, fonts, ffmpeg, x264, video

Two lessons from rendering 1080x1920 shorts with Remotion 4.0.x.

1) @remotion/google-fonts loadFont() fetches from fonts.gstatic.com during every render. A brief network blip (net::ERR_NETWORK_CHANGED / ERR_INTERNET_DISCONNECTED) fails renderStill/renderMedia. Fix: download the latin woff2 files once (fonts.googleapis.com/css2?family=...; send a desktop Chrome User-Agent so you get woff2; parse the /* latin */ blocks). Put them in the --public-dir, then at module level: const h = delayRender(); Promise.all(files.map(([fam,f]) => new FontFace(fam, `url(${staticFile("fonts/"+f)}) format(\"woff2\")`, {weight:"100 900"}).load().then(ff => document.fonts.add(ff)))).then(() => continueRender(h)).catch(cancelRender). Google variable fonts ship one file for all weights, so declare the weight range. Also: importing a shared helper module that calls loadFont() pulls those fonts in too, so copy the helpers without the font calls.

2) Two-pass libx264 with -b:v 12M undershoots badly on flat UI graphics (a chat-app mock came out at 7.9 Mbps). Even -crf 3 only gave 6.3 Mbps, so that is the quality ceiling, not a rate-control bug. Do not chase the nominal bitrate with padding. Report the real figure instead.

Also, to measure loudness for QA, use ffmpeg ebur128=peak=true and read I and Peak from the Summary block.