Press

Appearance

Assets ​

The <assets> element defines external resources used across your document: fonts, colours, images, and constant data. Assets provide a single place to manage branding and shared values.

Fonts ​

Google Fonts ​

The simplest way to use custom fonts -- just reference any Google Font by name:

xml
<frame font="Roboto">This uses Roboto from Google Fonts.</frame>
<h1 font="Playfair Display">An elegant heading.</h1>

Press automatically fetches and embeds the font. No registration needed.

Custom Fonts ​

For fonts not on Google Fonts, register them in <assets> with URLs for each variant:

xml
<assets>
  <fonts>
    <my-brand-font>
      <regular>https://example.com/fonts/BrandFont-Regular.ttf</regular>
      <bold>https://example.com/fonts/BrandFont-Bold.ttf</bold>
      <italic>https://example.com/fonts/BrandFont-Italic.ttf</italic>
      <bold-italic>https://example.com/fonts/BrandFont-BoldItalic.ttf</bold-italic>
    </my-brand-font>
  </fonts>
</assets>

Then use the registered name:

xml
<frame font="my-brand-font">Text in the custom font.</frame>

You only need to include the variants you use. If you only need regular and bold:

xml
<my-brand-font>
  <regular>https://example.com/fonts/BrandFont-Regular.ttf</regular>
  <bold>https://example.com/fonts/BrandFont-Bold.ttf</bold>
</my-brand-font>

Colours ​

Define named colours to use throughout the document:

xml
<assets>
  <colors>
    <primary>#1e3a5f</primary>
    <secondary>#2563eb</secondary>
    <accent>#059669</accent>
    <muted>#6b7280</muted>
    <danger>#dc2626</danger>
  </colors>
</assets>

Use the color name anywhere a color value is accepted:

xml
<frame background-color="primary" font-color="white" padding="16pt">
  <h1>Quarterly Report</h1>
</frame>

<frame border-weight-left="3pt" border-color="accent" padding-left="12pt">
  <p font-color="muted">Supporting commentary goes here.</p>
</frame>

This keeps branding consistent and makes it easy to update colors in one place.

Images ​

Define named images with URLs:

xml
<assets>
  <images>
    <logo>https://example.com/images/company-logo.png</logo>
    <watermark>https://example.com/images/watermark.svg</watermark>
    <cover-photo>https://example.com/images/hero.jpg</cover-photo>
  </images>
</assets>

Reference by name in src:

xml
<img src="logo" max-width="120pt" />
<img src="cover-photo" width="100%" height="100%" top="0" left="0" />

Data in Assets ​

Define constant values that are always available, even when payloads override <data>:

xml
<assets>
  <data type="json">
  {
    "defaults": {
      "currency": "£",
      "tax-rate": 20,
      "company-name": "Meridian Consulting",
      "logo": "https://example.com/logo.png",
      "country": "United Kingdom"
    }
  }
  </data>
</assets>

Access with {{ assets.data.defaults.currency }}. This is useful for fallback values:

xml
<frame>
  {{ data.company ? data.company : assets.data.defaults.company-name }}
</frame>

<img src="{{ data.logo ? data.logo : assets.data.defaults.logo }}" />

Asset data cannot be overridden by payloads, making it ideal for values that should never change.

Example: A Branded Document ​

xml
<press>
  <document format="A4" page-margin="2cm">
    <page>
      <frame direction="row" v-align="center" space-after-desired="24pt">
        <img src="logo" max-height="40pt" />
        <frame padding-left="12pt" font="UbuntuMono" font-size="18pt" font-color="primary">
          {{ assets.data.defaults.company-name }}
        </frame>
      </frame>
      <hr />
      <flow name="body" />
    </page>
  </document>

  <assets>
    <colors>
      <primary>#1e3a5f</primary>
      <accent>#2563eb</accent>
    </colors>
    <images>
      <logo>https://examples.papermill.io/papermill_logo.png</logo>
    </images>
    <data type="json">
    {
      "defaults": {
        "company-name": "Meridian Consulting"
      }
    }
    </data>
  </assets>

  <flows>
    <body>
      <h1 font-color="primary">Project Proposal</h1>
      <p>Prepared for Apex Industries Ltd.</p>
    </body>
  </flows>

  <styles>
    <document>
      <font>Inter</font>
      <font-size>10pt</font-size>
    </document>
    <h1>
      <font>UbuntuMono</font>
    </h1>
    <hr>
    <color>primary</color>
    </hr>
  </styles>
</press>