字型 - RemotionLab

載入 Google Fonts

最簡單的方式是用 @remotion/google-fonts：

npm install @remotion/google-fonts

import { loadFont } from "@remotion/google-fonts/NotoSansTC";
 
const { fontFamily } = loadFont();
 
export const MyScene: React.FC = () => {
  return (
    <h1 style={{ fontFamily, fontSize: 72 }}>
      使用 Noto Sans TC
    </h1>
  );
};

loadFont() 會自動載入字型並等待完成，不需要手動處理 delayRender。

常用中文字型

字型名稱	Import 路徑	說明
Noto Sans TC	`@remotion/google-fonts/NotoSansTC`	思源黑體（繁體）
Noto Serif TC	`@remotion/google-fonts/NotoSerifTC`	思源宋體（繁體）

載入本地字型

把字型檔放在 public/fonts/ 資料夾，然後用 CSS @font-face 或 FontFace API 載入：

方式一：CSS @font-face

import { staticFile } from "remotion";
 
const fontUrl = staticFile("fonts/MyFont-Bold.woff2");
 
export const MyScene: React.FC = () => {
  return (
    <>
      <style>{`
        @font-face {
          font-family: 'MyFont';
          src: url('${fontUrl}') format('woff2');
          font-weight: bold;
        }
      `}</style>
      <h1 style={{ fontFamily: "MyFont", fontSize: 72 }}>
        自訂字型
      </h1>
    </>
  );
};

方式二：FontFace API（推薦）

import { useState } from "react";
import { delayRender, continueRender, staticFile } from "remotion";
 
const waitForFont = delayRender("載入字型中...");
 
const font = new FontFace(
  "MyFont",
  `url(${staticFile("fonts/MyFont-Bold.woff2")})`
);
 
font
  .load()
  .then(() => {
    document.fonts.add(font);
    continueRender(waitForFont);
  })
  .catch(() => continueRender(waitForFont));

FontFace API 的好處是可以確保字型完全載入後才開始渲染，避免出現系統預設字型的閃爍。

字型粗細與樣式

載入多種粗細：

import { loadFont } from "@remotion/google-fonts/NotoSansTC";
 
const { fontFamily } = loadFont("normal", {
  weights: ["400", "700", "900"],
});

小結

用 @remotion/google-fonts 最方便（自動處理載入等待）
繁中推薦 Noto Sans TC（思源黑體）
本地字型用 FontFace API + delayRender 確保載入完成
一定要等字型載入完才渲染，否則會顯示系統預設字型