Fonts

How to use custom fonts in Format Studio.

Format recommends using local font files. They keep the network out of your build, so documents render reliably wherever they run. There are a few ways to work with fonts in Studio, but they all ultimately boil down to referencing the font file using @font-face from a font asset.

We'd recommend reading the Fonts page to understand how to set fonts across your documents, how to use font generics like sans-serif, our default font families and more.

Manual

like Images, you can reference any fonts that are placed in:

A special directory called assets nested under each document
A user-defined sharedAssetsDir that all documents can see

shared-assets

Inter.woff2

documents

invoice

assets

Noto-Serif.woff2

index.tsx

styles.css

format.config.json

{
	"sharedAssetsDir": "./shared-assets"
}

styles.css

@font-face {
  font-family: "Inter";
  src: url("./Inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Noto Serif";
  src: url("./Noto-Serif.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
}

:host {
	--font-sans: "Inter";
	--font-serif: "Noto Serif";
}

Fontsource

Fontsource is an open source repository over over 1500 fonts. It includes most Google Fonts, so it's useful and works well in Format.

Installation

Install the font package for the typeface you want. In this case, let's install Nunito Sans.

npm install @fontsource-variable/nunito-sans

pnpm add @fontsource-variable/nunito-sans

yarn add @fontsource-variable/nunito-sans

bun add @fontsource-variable/nunito-sans

Usage

Import the font family into your entry point file.

documents/invoice/index.tsx

import '@fontsource-variable/nunito-sans'

Then set the font in your styles.

documents/invoice/styles.css

:host {
  --font-sans: 'Nunito Sans Variable';
}

Or apply it directly to specific elements.

.invoice-body {
  font-family: 'Nunito Sans Variable';
}

Google Fonts

Google Fonts is convenient when designing web sites, since you can paste a chunk of CSS into your site's <head> tag. The catch is that the font files stay on Google's servers, which makes them a remote asset. Format recommends local assets for reliability.

To use a Google Font locally, either install it from Fontsource as above, or download the font files files and add them to your assets directory and reference them manually.

If you absolutely must reference a Google Font that is hosted remotely on Google's servers, you can enable --remote-assets at compile time for static asset ZIPs or use remoteAssets.enabled via setZipOptions for dynamic asset ZIPs.

Was this page helpful?