# Upload custom fonts and use your brand type in every design

[Canonical HTML page](https://gradiently.design/guide/custom-fonts-upload)

Your brand fonts are half of how people recognise you. Here is how to upload them to Gradiently, how families and weights are grouped, and the licence questions to ask first.

## The short version

- Gradiently accepts brand font uploads in OTF, TTF, WOFF and WOFF2 format, up to 15 MB per file.
- Uploaded files with the same family name are grouped into one family, so each weight and italic becomes a face of it.
- Gradiently reads the embedding permission set inside each font, and a font that forbids embedding is drawn as pixels in PDF and SVG exports.
- A desktop font licence does not always cover use in a web based design tool, so check the licence before uploading.
- Custom font upload is part of the brand kit, which comes with Gradiently Pro.

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. **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. **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. **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. **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. **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

| Format | Accepted | Notes |
| --- | --- | --- |
| OTF | Yes | The usual desktop format from foundries |
| TTF | Yes | Common for older and Google Fonts downloads |
| WOFF | Yes | A compressed web format |
| WOFF2 | Yes | The smallest web format; often the easiest file to find |
| TTC collection | No | Export a single font from the collection first |
| Files over 15 MB | No | Very large CJK or icon fonts may need subsetting |

Upload limits for brand fonts. A brand can keep up to 48 font files in all.

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](https://gradiently.design/guide/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.

A fashion announcement post set in a common library font pairing

A post set in a library pairing. Perfectly fine, and shared with every other brand that picked it.

The same fashion announcement post set in the brand's own uploaded typeface

The same post in the brand's own typeface. Type is often what makes a post recognisable before the logo is seen.

## 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](https://gradiently.design/guide/font-licensing) for the full picture, and ask your foundry if the licence doesn't say.

### Check first

- A desktop licence for a set number of computers
- A trial or personal use font
- A font from a free download site with no licence file
- A font a former agency bought in its own name

### Usually fine

- A licence that names web, app or software use
- Fonts under the SIL Open Font License, as most Google Fonts are
- A custom typeface your brand commissioned and owns
- A licence your foundry has confirmed in writing

If your brand fonts are off limits, a library font with a similar character is a sensible stand in. [Free fonts for commercial use](https://gradiently.design/guide/free-commercial-fonts) lists safe choices, and [font pairing](https://gradiently.design/guide/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.

| Embedding flag in the font | PNG, JPG, video | PDF and SVG |
| --- | --- | --- |
| Installable or editable | Rendered normally | Text kept as real text |
| Print and preview | Rendered normally | Text kept as real text |
| Restricted | Rendered normally | Text drawn as pixels |

Image and video exports are always pictures of your type. Only PDF and SVG, which can carry the font itself, change when embedding is restricted.

> **When pixels matter** Pixel text in a PDF looks the same on screen but can't be selected or searched, and a printer can't adjust it. For print work in a restricted font, export at a high resolution, or ask the foundry for an embeddable version.

## 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](https://gradiently.design/guide/brand-fonts) and [a typography system](https://gradiently.design/guide/brand-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](https://gradiently.design/guide/import-brand-from-website) fills in the name, description, colour and icon in one step.

## FAQ

### What font formats can I upload to Gradiently?

OTF, TTF, WOFF and WOFF2, up to 15 MB per file. TTC font collections aren't accepted, so export a single font from them first.

### Can I upload a font I bought for my computer?

Only if its licence allows use in web based software. Many desktop licences don't, so check the licence or ask the foundry.

### Why is my text pixelated in a PDF export?

The font's embedding permission is restricted, so Gradiently draws it as pixels in PDF and SVG instead of embedding the font file.

### Do uploaded fonts work in every design?

They belong to the brand you uploaded them to, and every design in that brand can use them. Another brand needs its own upload.

### What happens to designs if I delete a font?

Text that used it falls back to the library sans, so open older designs and choose a replacement where needed.