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
metadata
tags: fonts, google-fonts, typography, text

Using fonts in Remotion

Google Fonts with @remotion/google-fonts

The recommended way to use Google Fonts. It's type-safe and automatically blocks rendering until the font is ready.

Prerequisites

First, the @remotion/google-fonts package needs to be installed. If it is not installed, use the following command:

bash
npx remotion add @remotion/google-fonts # If project uses npmbunx remotion add @remotion/google-fonts # If project uses bunyarn remotion add @remotion/google-fonts # If project uses yarnpnpm exec remotion add @remotion/google-fonts # If project uses pnpm
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
const { fontFamily } = loadFont();
export const MyComposition = () => {  return (    <div style={{ fontFamily }}>      Hello World    </div>  );};

Preferrably, specify only needed weights and subsets to reduce file size:

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

Using in components

Call loadFont() at the top level of your component or in a separate file that's imported early:

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