Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-markup

Structure Remotion scenes with markup patterns for layout, typography, and reusable video UI.

View sourceVideoRemotion

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-markup

For local font files, use the @remotion/fonts package.

Prerequisites

First, install @remotion/fonts:

bash
npx remotion add @remotion/fonts # If project uses npmbunx remotion add @remotion/fonts # If project uses bunyarn remotion add @remotion/fonts # If project uses yarnpnpm exec remotion add @remotion/fonts # If project uses pnpm

Loading a local font

Place your font file in the public/ folder and use loadFont():

tsx
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>  );};

Loading multiple weights

Load each weight separately with the same family name:

tsx
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",  }),]);

Available options

tsx
loadFont({  family: "MyFont", // Required: name to use in CSS  url: staticFile("font.woff2"), // Required: font file URL  format: "woff2", // Optional: auto-detected from extension  weight: "400", // Optional: font weight  style: "normal", // Optional: normal or italic  display: "block", // Optional: font-display behavior});