使用字体

这里有一些方法可以在 Remotion 中使用自定义字体。

🌐 Here are some ways how you can use custom fonts in Remotion.

使用 @remotion/google-fonts 的 Google 字体

🌐 Google Fonts using @remotion/google-fonts

从 v3.2.40 起可用

🌐 available from v3.2.40

@remotion/google-fonts 是一种类型安全的方式来加载 Google 字体，而无需创建 CSS 文件。

MyComp.tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";

const { fontFamily } = loadFont();

const GoogleFontsComp: React.FC = () => {
  return <div style={{ fontFamily }}>Hello, Google Fonts</div>;
};

使用 CSS 的 Google 字体

🌐 Google Fonts using CSS

导入 Google Fonts 提供给你的 CSS。

🌐 Import the CSS that Google Fonts gives you.

note

从2.2版本开始，Remotion将会自动等待字体加载完成。

font.css
@import url("https://fonts.googleapis.com/css2?family=Bangers");

MyComp.tsx
import "./font.css";

const MyComp: React.FC = () => {
  return <div style={{ fontFamily: "Bangers" }}>Hello</div>;
};

使用 @remotion/fonts 的本地字体

🌐 Local fonts using @remotion/fonts

从 v4.0.164 起可用

🌐 available from v4.0.164

将字体放入你的 public/ 文件夹。
在你的应用中某处执行 loadFont() 调用时：

🌐 Put the font into your public/ folder.
Put the loadFont() call somewhere in your app where it gets executed:

load-fonts.ts
import { loadFont } from "@remotion/fonts";
import { staticFile } from "remotion";

const fontFamily = "Inter";

loadFont({
  family: fontFamily,
  url: staticFile("Inter-Regular.woff2"),
  weight: "500",
}).then(() => {
  console.log("Font loaded!");
});

该字体现在可以使用：

🌐 The font is now available for use:

MyComp.tsx

<div style={{ fontFamily: fontFamily }}>Some text</div>;

本地字体（手动）

🌐 Local fonts (manually)

你可以使用网页原生的 FontFace API 加载字体。

🌐 You may load fonts by using the web-native FontFace API.

load-fonts.ts
import { continueRender, delayRender, staticFile } from "remotion";

const waitForFont = delayRender();
const font = new FontFace(
  `Bangers`,
  `url('${staticFile("bangers.woff2")}') format('woff2')`,
);

font
  .load()
  .then(() => {
    document.fonts.add(font);
    continueRender(waitForFont);
  })
  .catch((err) => console.log("Error loading font", err));

note

如果你的 Typescript 类型报错，请安装最新版本的 @types/web 包。