everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/fonts.md

name, description, metadata

name	description	metadata
fonts	RemotionでのGoogle Fontsとローカルフォントの読み込み	tags fonts, google-fonts, typography, text

Remotionでのフォントの使用

@remotion/google-fontsによるGoogle Fonts

Google Fontsを使用するための推奨方法です。タイプセーフで、フォントの準備ができるまで自動的にレンダリングをブロックします。

前提条件

まず、@remotion/google-fontsパッケージをインストールする必要があります。 インストールされていない場合は、以下のコマンドを使用してください:

npx remotion add @remotion/google-fonts # プロジェクトがnpmを使用している場合
bunx remotion add @remotion/google-fonts # プロジェクトがbunを使用している場合
yarn remotion add @remotion/google-fonts # プロジェクトがyarnを使用している場合
pnpm exec remotion add @remotion/google-fonts # プロジェクトがpnpmを使用している場合

import { loadFont } from "@remotion/google-fonts/Lobster";

const { fontFamily } = loadFont();

export const MyComposition = () => {
  return <div style={{ fontFamily }}>Hello World</div>;
};

ファイルサイズを削減するために、必要なウェイトとサブセットのみを指定することをお勧めします:

import { loadFont } from "@remotion/google-fonts/Roboto";

const { fontFamily } = loadFont("normal", {
  weights: ["400", "700"],
  subsets: ["latin"],
});

フォントの読み込み完了を待つ

フォントの準備ができたタイミングを知る必要がある場合は waitUntilDone() を使用します:

import { loadFont } from "@remotion/google-fonts/Lobster";

const { fontFamily, waitUntilDone } = loadFont();

await waitUntilDone();

@remotion/fontsによるローカルフォント

ローカルフォントファイルには @remotion/fonts パッケージを使用します。

前提条件

まず、@remotion/fontsをインストールします:

npx remotion add @remotion/fonts # プロジェクトがnpmを使用している場合
bunx remotion add @remotion/fonts # プロジェクトがbunを使用している場合
yarn remotion add @remotion/fonts # プロジェクトがyarnを使用している場合
pnpm exec remotion add @remotion/fonts # プロジェクトがpnpmを使用している場合

ローカルフォントの読み込み

フォントファイルを public/ フォルダに配置し、loadFont() を使用します:

import { loadFont } from "@remotion/fonts";
import { staticFile } from "remotion";

await loadFont({
  family: "MyFont",
  url: staticFile("MyFont-Regular.woff2"),
});

export const MyComposition = () => {
  return <div style={{ fontFamily: "MyFont" }}>Hello World</div>;
};

複数のウェイトの読み込み

同じファミリー名で各ウェイトを個別に読み込みます:

import { loadFont } from "@remotion/fonts";
import { staticFile } from "remotion";

await Promise.all([
  loadFont({
    family: "Inter",
    url: staticFile("Inter-Regular.woff2"),
    weight: "400",
  }),
  loadFont({
    family: "Inter",
    url: staticFile("Inter-Bold.woff2"),
    weight: "700",
  }),
]);

利用可能なオプション

loadFont({
  family: "MyFont", // 必須: CSSで使用する名前
  url: staticFile("font.woff2"), // 必須: フォントファイルのURL
  format: "woff2", // オプション: 拡張子から自動検出
  weight: "400", // オプション: フォントウェイト
  style: "normal", // オプション: normalまたはitalic
  display: "block", // オプション: font-displayの動作
});

コンポーネントでの使用

コンポーネントのトップレベル、または早い段階でインポートされる別のファイル内で loadFont() を呼び出します:

import { loadFont } from "@remotion/google-fonts/Montserrat";

const { fontFamily } = loadFont("normal", {
  weights: ["400", "700"],
  subsets: ["latin"],
});

export const Title: React.FC<{ text: string }> = ({ text }) => {
  return (
    <h1
      style={{
        fontFamily,
        fontSize: 80,
        fontWeight: "bold",
      }}
    >
      {text}
    </h1>
  );
};