ZacharyZhang-NY
e74dafcd36
Three independently ugly bugs that all fed the same log flood:
* Electron's `WebFrameMain.send` writes every "Render frame was disposed"
to stderr via `console.error`. When the worker fans a second
agent-event past a reloading renderer, we produced thousands of
identical lines and stalled the main loop on stderr I/O. Added a
`mainFrame.detached` guard so the send is short-circuited before
Electron's own catch block fires, and installed a targeted filter in
`suppress-warnings.ts` (now actually imported from the entry point)
so the specific `console.error("Error sending from webFrameMain:"…)`
noise never reaches the terminal. Any other payload still surfaces.
* `dispatchAgentMessage` accepted the human-reader sentinel as a wake
target when an agent replied to `__board__` — `wakeAgentIfPossible`
then called `db.getAgent("__board__")`, threw, and the dispatcher
kept repeating on every send. Strip `HUMAN_SENDER_ID` at
`resolveMessageWakeTargets`, and keep a defense-in-depth guard in the
heartbeat so a stray caller (future automation fan-out) cannot
reintroduce the crash.
* Pi's skills loader rejects any SKILL.md whose frontmatter `name`
diverges from its parent directory. The four bundled `my-writing-style`
copies declared `name: writing-style-skill`, so every install emitted
a warning and dropped the skill. They also lived as orphan gitlinks
(mode 160000 without .gitmodules), and the global `*.md` gitignore
hid every other SKILL.md from version control. Fixed the frontmatter
to match the dir, converted the dangling submodules to plain trees,
and allowlisted `builtin-skills/**/*.md` so a fresh clone carries the
catalogue instead of silently losing it.
153 lines
3.4 KiB
Markdown
153 lines
3.4 KiB
Markdown
---
|
|
name: fonts
|
|
description: Loading Google Fonts and local fonts in Remotion
|
|
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 npm
|
|
bunx remotion add @remotion/google-fonts # If project uses bun
|
|
yarn remotion add @remotion/google-fonts # If project uses yarn
|
|
pnpm 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"],
|
|
});
|
|
```
|
|
|
|
### Waiting for font to load
|
|
|
|
Use `waitUntilDone()` if you need to know when the font is ready:
|
|
|
|
```tsx
|
|
import { loadFont } from "@remotion/google-fonts/Lobster";
|
|
|
|
const { fontFamily, waitUntilDone } = loadFont();
|
|
|
|
await waitUntilDone();
|
|
```
|
|
|
|
## Local fonts with @remotion/fonts
|
|
|
|
For local font files, use the `@remotion/fonts` package.
|
|
|
|
### Prerequisites
|
|
|
|
First, install @remotion/fonts:
|
|
|
|
```bash
|
|
npx remotion add @remotion/fonts # If project uses npm
|
|
bunx remotion add @remotion/fonts # If project uses bun
|
|
yarn remotion add @remotion/fonts # If project uses yarn
|
|
pnpm 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
|
|
});
|
|
```
|
|
|
|
## 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>
|
|
);
|
|
};
|
|
```
|