---
title: "Branding your documents - Workflow Documents"
description: "Logo, colors, fonts (built-in, Google Fonts or your own font files) and company details for every document, and how a single template overrides them."
canonical: "https://docs.workflow-documents.app/branding"
---

# Branding your documents

Your branding is set once, on the **Settings** page, and reaches every template: as the `brand` object in Liquid and as CSS variables. The ready-made templates use it out of the box, and your own templates can too.

The page shows a live **Preview** next to the form: the Invoice template with sample data and your branding, unsaved changes included.

## Logo

Select **Upload logo** and pick a PNG, JPEG or WebP file of up to 1 MB. The logo is stored as soon as you pick it, without the save bar. **Logo width** sets how wide it is printed.

The ready-made templates show the logo at the top. Without a logo they print your company name, or your shop name when the company name is empty. **Remove logo** takes it out of future documents. Documents that were already generated keep it.

## Colors

Five colors, entered as hex values such as #1a2b3c:

| Color | Used for | CSS variable |
| --- | --- | --- |
| Primary | Headings and the grand total in the ready-made templates | `var(--brand-primary)` |
| Accent and links | Links | `var(--brand-accent)` |
| Text | Body text | `var(--brand-text)` |
| Muted text | Secondary text such as labels and the footer | `var(--brand-muted)` |
| Table lines | Lines between table rows | `var(--brand-border)` |

## Typography

Choose a **Heading font**, a **Body font** and a **Base font size**. The fonts come from three groups:

- **Built-in fonts** - always available and the most dependable choice: Liberation Sans (like Arial), Liberation Serif (like Times New Roman), Liberation Mono (like Courier New), DejaVu Sans, DejaVu Serif, Noto Sans, Carlito (like Calibri) and Caladea (like Cambria).
- **Google Fonts** - Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans and Space Grotesk, in regular and bold.
- **Your fonts** - font files you uploaded, see below.

A new store starts with Liberation Sans for both and a base size of 11 pt.

> [!NOTE]
> **Google Fonts are downloaded at render time**
> A Google font is downloaded from Google Fonts each time a PDF is rendered. If the download fails, the document is still generated, with a built-in font instead. To make rendering independent of Google, upload the font file as a custom font.

## Custom fonts

Under **Custom fonts**, select **Add font files** and pick your own font files: WOFF2, WOFF, TTF or OTF, up to 2 MB each. You can select several files at once and add more later, up to 8 fonts. Only upload fonts you are licensed to use.

Each font has a **Font name** and a **Use for** setting: **Headings and body**, **Headings only** or **Body only**. A name or a use is saved as soon as you change it. Uploaded fonts then appear under **Your fonts** in the font selectors.

When you delete a font, or change its use so it no longer fits, a heading or body font that used it goes back to the default, in your brand and in every template.

## Company details

| Field | Notes |
| --- | --- |
| Company name | Printed in the header |
| Address | One line per row |
| Tax or VAT ID | Printed under the address |
| Footer text | For example bank details or a thank-you line |

The ready-made templates print these in the header and footer. Leave a field empty to leave it out. With an empty address, the templates print your shop's address from Shopify instead.

## Use your branding in your own templates

In Liquid, the values are on the `brand` object. Multi-line fields keep their line breaks with the `br` filter:

```liquid
{% if brand.logo_url %}
  <img src="{{ brand.logo_url }}" width="{{ brand.logo_width }}" alt="">
{% endif %}

<p>{{ brand.company_name }}<br>{{ brand.address | br }}</p>

{% if brand.footer_text != "" %}
  <div class="footer">{{ brand.footer_text | br }}</div>
{% endif %}
```

In CSS, use the variables:

```css
h1 { color: var(--brand-primary); }
a { color: var(--brand-accent); }
td { border-bottom: 1px solid var(--brand-border); }
.footer { color: var(--brand-muted); }
```

Every document already uses your body font, base size and text color for the page and your heading font for headings. The full list of values is in [Template variables and Liquid](https://docs.workflow-documents.app/template-variables-and-liquid.md).

## Different branding for one template

The **Branding** tab of the template editor sets colors, fonts and font size for that template only. Each setting is decided on its own: a field the template fills wins, a field it leaves empty uses your brand.

- An empty color field shows the brand color as a placeholder.
- A font selector shows **Brand default** with the name of the brand font.
- **Reset to brand** removes the template's own values.

The logo and the company details cannot be set per template. They always come from Settings. To print something else in one template, write it into that template's HTML.

## Next steps

- [Template variables and Liquid](https://docs.workflow-documents.app/template-variables-and-liquid.md) - the brand object in full.
- [The template editor](https://docs.workflow-documents.app/template-editor.md) - the Branding tab in the editor.
- [Developer API and MCP](https://docs.workflow-documents.app/developer-api-and-mcp.md) - read and change the branding over the API.