1---
2name: assets
3description: Importing images, videos, audio, and fonts into Remotion
4metadata:
5  tags: assets, staticFile, images, fonts, public
6---
7 
8# Importing assets in Remotion
9 
10## The public folder
11 
12Place assets in the `public/` folder at your project root.
13 
14## Using staticFile()
15 
16You MUST use `staticFile()` to reference files from the `public/` folder:
17 
18```tsx
19import { Img, staticFile } from "remotion";
20 
21export const MyComposition = () => {
22  return <Img src={staticFile("logo.png")} />;
23};
24```
25 
26The function returns an encoded URL that works correctly when deploying to subdirectories.
27 
28## Using with components
29 
30**Images:**
31 
32```tsx
33import { Img, staticFile } from "remotion";
34 
35<Img src={staticFile("photo.png")} />;
36```
37 
38**Videos:**
39 
40```tsx
41import { Video } from "@remotion/media";
42import { staticFile } from "remotion";
43 
44<Video src={staticFile("clip.mp4")} />;
45```
46 
47**Audio:**
48 
49```tsx
50import { Audio } from "@remotion/media";
51import { staticFile } from "remotion";
52 
53<Audio src={staticFile("music.mp3")} />;
54```
55 
56**Fonts:**
57 
58```tsx
59import { staticFile } from "remotion";
60 
61const fontFamily = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
62await fontFamily.load();
63document.fonts.add(fontFamily);
64```
65 
66## Remote URLs
67 
68Remote URLs can be used directly without `staticFile()`:
69 
70```tsx
71<Img src="https://example.com/image.png" />
72<Video src="https://remotion.media/video.mp4" />
73```
74 
75## Important notes
76 
77- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
78- Special characters in filenames (`#`, `?`, `&`) are automatically encoded
79