I documented the workflows that actually survive rendering \u2014 both for local custom fonts and Google Fonts.<\/p>\n\n\n\n Before diving into solutions, here’s why fonts break in Remotion when they work fine in regular React apps.<\/p>\n\n\n\n The rendering process:<\/strong><\/p>\n\n\n\n Remotion Studio uses your browser’s normal rendering \u2014 fonts load from cache, CDN, local files like any webpage.<\/p>\n\n\n\n But when rendering video, Remotion uses headless Chrome (Puppeteer-based). This headless browser:<\/p>\n\n\n\n Three failure modes:<\/strong><\/p>\n\n\n\n I hit all three on different projects in February. First time, I thought it was a Remotion bug. Nope \u2014 just misunderstanding headless rendering.<\/p>\n\n\n\n While, the moment the font changed to Arial, actually half of the problem had been solved. The real effort was spent on clarifying why it failed, which approaches were false, and which ones were reliable.<\/p>\n\n\n\n What we did in Crepal was to systematically document these “issues that only surface during the rendering stage”, so that they won’t steal three hours of your time again next time.<\/p>\n\n\n\n Try Crepal for free!<\/a><\/strong><\/p>\n\n\n\n For custom fonts, use the @remotion\/fonts package<\/a>.<\/p>\n\n\n\n Step 1: Install<\/strong><\/p>\n\n\n\n bash<\/p>\n\n\n\n Step 2: Put fonts in <\/strong> Critical \u2014 fonts must be in Step 3: Load fonts<\/strong><\/p>\n\n\n\n According to the font loading guide<\/a>:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n Use <\/strong> Step 4: Use the font<\/strong><\/p>\n\n\n\n javascript<\/p>\n\n\n\n Why this works:<\/strong><\/p>\n\n\n\n I tested this Feb 6th with a client’s branded typeface. Three weights, 2-minute video \u2014 every frame had the correct font.<\/p>\n\n\n\n If you’re rendering videos with multi-language subtitles (e.g., English + Japanese + Arabic), you need a fallback strategy. No single font supports every Unicode range.<\/p>\n\n\n\n The problem:<\/strong><\/p>\n\n\n\n Your custom English font might not have Japanese characters. If you specify Solution: Font stacking with Unicode ranges<\/strong><\/p>\n\n\n\n javascript<\/p>\n\n\n\n Then use font stacking in CSS:<\/p>\n\n\n\n javascript<\/p>\n\n\n\n The browser will use:<\/p>\n\n\n\n Unicode range reference:<\/strong><\/p>\n\n\n\n I tested this with English + Japanese subtitles on February 7th. English used a custom brand font, Japanese used Noto Sans CJK. Rendered perfectly \u2014 no character replacement issues.<\/p>\n\n\n\n Tip:<\/strong> Use Noto fonts<\/a> for fallback coverage. They’re designed specifically for comprehensive language support.<\/p>\n\n\n\n For Google Fonts, use the @remotion\/google-fonts package<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/crepal.ai\/blog\/wp-content\/uploads\/2026\/02\/image-56-1024x459.png\")
<\/figure>\n<\/figure>\n\n\n\nWhy Fonts Break (SSR, Bundling, Caching)<\/h2>\n\n\n\n
\n
\n
@import<\/code> might not finish downloading before frames render. You get Arial in the final video.<\/li>\n\n\n\n..\/fonts\/custom.woff2<\/code> might not get included in the build. Font file just isn’t there.<\/li>\n\n\n\nuseEffect<\/code> without delayRender<\/code>) won’t be available during frame generation.<\/li>\n<\/ol>\n\n\n\n![\"\"](\"https:\/\/crepal.ai\/blog\/wp-content\/uploads\/2026\/02\/image-57-1024x666.png\")
<\/figure>\n<\/figure>\n\n\n\nLocal Font Loading That Survives Rendering<\/h2>\n\n\n\n
npm install @remotion\/fonts<\/code><\/pre>\n\n\n\npublic\/<\/code><\/strong><\/p>\n\n\n\npublic\/<\/code>:<\/p>\n\n\n\npublic\/\n\u2514\u2500\u2500 fonts\/\n \u251c\u2500\u2500 CustomFont-Regular.woff2\n \u251c\u2500\u2500 CustomFont-Bold.woff2\n \u2514\u2500\u2500 CustomFont-Italic.woff2<\/code><\/pre>\n\n\n\nimport { loadFont } from '@remotion\/fonts';\nimport { staticFile } from 'remotion';\n\nloadFont({\n family: 'CustomFont',\n url: staticFile('fonts\/CustomFont-Regular.woff2'),\n weight: '400',\n});\n\nloadFont({\n family: 'CustomFont',\n url: staticFile('fonts\/CustomFont-Bold.woff2'),\n weight: '700',\n});<\/code><\/pre>\n\n\n\nstaticFile()<\/code><\/strong> \u2014 not relative imports.<\/strong><\/p>\n\n\n\n<div style={{ fontFamily: 'CustomFont', fontWeight: 700 }}>\n Text in your custom font\n<\/div><\/code><\/pre>\n\n\n\nloadFont()<\/code> uses delayRender()<\/code> internally. Remotion won’t render frames until fonts are loaded.<\/p>\n\n\n\nFont Fallback Strategy (Multi-Language Subtitles)<\/h3>\n\n\n\n
fontFamily: 'CustomFont'<\/code> and try to render Japanese text, you’ll get those ugly \ufffd replacement characters or blank boxes.<\/p>\n\n\n\n\/\/ Load English font<\/em>\nloadFont({\n family: 'CustomFont',\n url: staticFile('fonts\/CustomFont-Regular.woff2'),\n weight: '400',\n unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153', \/\/ Latin characters<\/em>\n});\n\n\/\/ Load Japanese font for CJK characters<\/em>\nloadFont({\n family: 'NotoSansCJK',\n url: staticFile('fonts\/NotoSansCJKjp-Regular.otf'),\n weight: '400',\n unicodeRange: 'U+3000-9FFF, U+FF00-FFEF', \/\/ Japanese\/CJK range<\/em>\n});\n\n\/\/ Load Arabic font<\/em>\nloadFont({\n family: 'NotoSansArabic',\n url: staticFile('fonts\/NotoSansArabic-Regular.ttf'),\n weight: '400',\n unicodeRange: 'U+0600-06FF, U+0750-077F', \/\/ Arabic range<\/em>\n});<\/code><\/pre>\n\n\n\n<div style={{\n fontFamily: '\"CustomFont\", \"NotoSansCJK\", \"NotoSansArabic\", sans-serif',\n}}>\n {subtitleText}\n<\/div><\/code><\/pre>\n\n\n\n\n
\n
U+0000-00FF, U+0100-024F<\/code><\/li>\n\n\n\nU+0400-04FF<\/code><\/li>\n\n\n\nU+3000-9FFF, U+FF00-FFEF<\/code><\/li>\n\n\n\nU+0600-06FF<\/code><\/li>\n\n\n\nU+0590-05FF<\/code><\/li>\n\n\n\nU+0E00-0E7F<\/code><\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/crepal.ai\/blog\/wp-content\/uploads\/2026\/02\/image-58-1024x715.png\")
<\/figure>\n<\/figure>\n\n\n\nGoogle Fonts with Remotion Packages (Safe Workflow)<\/h2>\n\n\n\n
![\"\"](\"https:\/\/crepal.ai\/blog\/wp-content\/uploads\/2026\/02\/image-59-1024x423.png\")
<\/figure>\n<\/figure>\n\n\n\n