Upload custom fonts and use your brand type in every design

To upload custom fonts to Gradiently, open the Brand page, go to Fonts and choose Upload font under Your own fonts. Add your OTF, TTF, WOFF or WOFF2 files, one weight at a time or several together, then pick your font as the Heading or Body face. From then on, new designs in the Studio start in your type, and the Designer uses it too. Before you upload, spend two minutes on your licence: that part matters more than the button.

How to upload custom fonts to your brand kit

1. 1

   Find the font files

   Look in the folder your foundry or designer sent, not your system font menu. You want one file per style: Regular, Italic, Medium, Bold and so on.

2. 2

   Open Brand, then Fonts

   Make sure you're in the right brand: each brand keeps its own fonts. Under Your own fonts, choose Upload font.

3. 3

   Add the styles you use

   Upload each file. When one is ready you'll see "Name is ready to use". Files that share a family name join the same family automatically.

4. 4

   Set heading and body

   Open the Heading and Body pickers and choose your font from Yours. The preview beside the form shows a sample post set in them.

5. 5

   Check the warning, if any

   If the font's own settings forbid embedding, Gradiently tells you PDF and SVG exports will draw it as pixels. More on that below.

Which font files work

Variable fonts work too. Gradiently reads the weight range inside the file, so a single variable file can cover everything from light to black. If you're new to them, variable fonts explains what they can do.

How families, weights and replacements work

Gradiently groups files by the family name stored inside each font, ignoring capitals and spacing. Upload Söhne Regular, Söhne Italic and Söhne Bold and you get one family with three faces, not three fonts. A few behaviours follow from that, and they save tidying later.

• The same file twice does nothing, so you can't create duplicates by accident.
• A new file for an existing face, say an updated Bold from your foundry, replaces the old one.
• Rename a family if its internal name is unhelpful, such as a code from a custom typeface project.
• Remove a family or a single face when you no longer need it. Designs that used it fall back to the library sans, so check older designs afterwards.

Font licences: what to check before you upload

A font file is software, and its licence says where you may use it. Many licences separate desktop use, where the font is installed on named computers, from web or app use, where it is served to browsers. Uploading to any web based design tool, Gradiently included, stores the file and serves it to the people working in your workspace, and exports can embed it. Read font licensing for the full picture, and ask your foundry if the licence doesn't say.

If your brand fonts are off limits, a library font with a similar character is a sensible stand in. Free fonts for commercial use lists safe choices, and font pairing helps match them.

Embedding permissions and your exports

Separate from the written licence, foundries set an embedding flag inside the font file itself. Gradiently reads it on upload and respects it when you export.

Making the most of your own type

Upload only the styles you actually use: usually a regular, an italic and one or two heavier weights. A tight set keeps designs consistent and the font menu short. Then set the heading face to your display or bold style and the body face to something calm at small sizes; brand fonts and a typography system go further.

In the Studio, Apply brand kit puts your brand fonts on every word in a design at once, and a Mark's legibility keeps them readable whatever sits behind them. If you're setting up the rest of the kit too, import your brand from your website fills in the name, description, colour and icon in one step.