Media, images & fonts
The Media tab is your site's file library: images, logos, photos, favicons, short videos, audio, and font files.
Upload files
- Open the Media tab.
- Optionally, click New media folder to keep things organized, for example
logos,team, orfonts. - Click Upload media and choose one or more files.
| Allowed | Limit |
|---|---|
Images (.jpg, .png, .webp, .gif, .svg, .ico) | 3 MB per file |
| Video and audio | 3 MB per file |
Fonts (.woff2, .woff, .ttf, .otf) | 3 MB per file |
For larger files, especially video, host them elsewhere (a video service, a CDN, or Deep Woods Files) and use the file's address. Every image and video picker has a Use external source option for this.
Select a file in Media to see its details (type, size, and dimensions), along with its Public path and a ready-made Markdown snippet you can copy.
Use an image
In a block field, such as a hero Logo, a testimonial Avatar, or a logo strip image: click the field and pick the image from the list. Studio fills in the right address.
In the page body: type /, choose Image, and pick, upload, or link an image. See Images.
/images/photo.jpg won't load.From another website: any image field also accepts a full image address (https://…). The image must be publicly reachable. Links to files that require a login, such as private cloud-drive links, won't display.
Image tips
- Size before you upload. About 2000 pixels wide is plenty for full-width images, and 1200 pixels for most others. Compress JPEG and PNG files, or use WebP, to stay well under 3 MB and keep pages fast.
- Use SVG or transparent PNG for logos so they look sharp on any background.
- Always add alternative text that describes the image. It helps visitors who use screen readers, and it helps search engines.
- Keep file names simple, such as
team-photo.jpgrather thanIMG_2041 (final) copy.JPG.
Favicon
- Upload a square
.png(at least 512 × 512 pixels),.svg, or.icofile to Media. - Go to Content → settings → site and pick it in Favicon.
- Publish. Browsers cache favicons, so you may need a hard refresh to see the new one.
.ico files work as favicons, but Media may not show a preview thumbnail for them. That's expected.
Brand fonts
Your site can use any Google Font from the dropdowns in settings. To use your own brand font, the one your designer gave you or one from a service like Adobe Fonts, you need two things: the font's name and its source.
Option A: upload the font file
Upload the file
In Media, upload the font file. .woff2 is best because it's the smallest. Each font setting uses one file, so upload the exact style you want: for example, the Bold file for headings and the Regular file for body text. If you use two styles of the same font, give each its own name, such as Acme Sans Bold and Acme Sans.
Find the exact font name
This is the font's family name, such as Acme Sans. It's usually in the file name, or listed by your font provider.
Set the name and source
In Content → settings → site → Fonts, enter the name in Custom heading font name (or Custom body font name). Then click Custom heading font source (or Custom body font source) and pick the uploaded file.
Option B: use a font link
If your font service gives you a stylesheet link, such as an Adobe Fonts web project link (https://use.typekit.net/xxxxxxx.css), paste that link into the Custom … font source field, and enter the font name exactly as the service lists it in Custom … font name.
Where custom fonts can go
The same name-and-source pair works at three levels:
- Site settings: the whole site.
- Page Settings: one page. See Page settings.
- A block's props (Heading Font Custom and Heading Font Url): one block only, such as a hero with a display font.
If the font doesn't show, check that the name matches exactly, including capital letters and spaces, then reload the preview.