Fonts

Brand fonts, hosted web fonts, and fonts from your computer — in the Design panel and in every agent's brief.

Type is where a design stops looking generic, so Doop makes a real typeface as easy to use as a colour. Upload your font files to a font library and they appear in the Design panel's font menu, agents designing on those canvases are told to use them, and a frame that uses one carries the font with it — screenshots, PDF and PSD exports, Figma hand-off and the iOS app all render it. If you have no files to upload, a curated roster of hosted web fonts is one pick away.

Where fonts come from

Select some text and open the Design panel's Font family menu. It is grouped by source:

Font libraries

There are two kinds of library, and a canvas uses exactly one of them:

Upload fonts

Click Upload fonts on the library card, or drop the files onto it. Doop accepts TTF, OTF, WOFF and WOFF2, up to 10 MB each, one style per file. The family name, weight and style are read from the file itself, so Brand-SemiboldItalic.woff2 lands as Brand · 600 italic without any form to fill; a variable font is recognised with its whole weight range. Upload a family's styles one after another and they group under one name. Re-uploading a style replaces it.

The card lists every family with its styles and a preview line. Remove takes a style or a whole family out of the menu and agents stop being offered it — but frames that already use it keep rendering it, since the font file is an ordinary immutable asset the frame points at. Removing a font never breaks a design.

Add from this computer

In the desktop app the library card has one more button, Add from this computer. It opens your operating system's fonts folder (your own fonts first), and the files you pick are uploaded to the library through the same path as any other upload — so a font installed on your Mac becomes a library font everyone on the workspace's canvases can use, rather than a reference only your machine can render. Collections (.ttc, .dfont) and files over 10 MB are left out by name.

A confirm step points out that the fonts are shared with everyone the library serves, and that fonts installed with an operating system or bought for one machine are often licensed for one person. Doop does not check licences for you — have a look at the font's licence before you share it.

How frames carry fonts

A frame is a self-contained HTML document, so a font cannot live only in the editor. When a frame's CSS names a library family, Doop adds the matching @font-face rules to one managed <style data-doop-fonts> block in the frame's own <head>, on every save — yours, an agent's, the last chunk of a streamed design. The rules point at the font's asset URL, never at the library, which is why a removed font keeps rendering and why every renderer that reads the HTML (screenshots, PDF, PSD, Figma, iOS) shows the right face. The block only ever grows; leave it alone.

Hosted roster families work the same way with a single <link data-doop-webfonts> tag: name Manrope in your CSS and the frame loads it from Google Fonts on its own. If a library family has the same name as a roster family, the library wins. A self-hosted instance without outbound internet renders roster fonts as their generic fallback in exports.

Fonts for agents

Agents see the library in get_canvas as fonts, with the hosted roster as webFonts, and a note that says the one thing that matters: name the family in CSS; do not load it from Google Fonts or embed it yourself. The frame pipeline does the rest. The Doop Agent gets the same list in its brief, so a card like this just works: 

Rebuild the hero in our brand fonts — Söhne for headings, Inter for body —
and tighten the type ramp to four sizes.

If a brand uses the same face everywhere, make it a font-family token (font-brand) and ask for var(--font-brand) in briefs. A library family named only through a token is still embedded in every frame that uses the token.

Tips