Fonts

Sites use Inter by default. styles.fonts picks another font, for the whole site or separately for headings and body text.

A Google Font

Set family to the font’s name on Google Fonts, and it’s loaded for you:

{
  "styles": {
    "fonts": { "family": "Space Grotesk" }
  }
}

Headings and body text

heading and body take the same fields, for headings or for the rest of the text. Whatever they don’t set comes from the top level - or from Inter:

{
  "styles": {
    "fonts": {
      "family": "Inter",
      "heading": { "family": "Playfair Display", "weight": 700 }
    }
  }
}

Your own font file

Set source to a font file - in your project, or a URL - and format to its type:

A file in the project

{
  "styles": {
    "fonts": {
      "family": "Acme Sans",
      "source": "/fonts/AcmeSans-Regular.woff2",
      "format": "woff2",
      "weight": 400
    }
  }
}

A hosted file

{
  "styles": {
    "fonts": {
      "family": "Hubot Sans",
      "source": "https://cdn.example.com/fonts/Hubot-Sans.woff2",
      "format": "woff2"
    }
  }
}

family is then the name you give the font. A file in the project is a path from the project folder, like a logo.

Fields

family string required

A Google Fonts name, or the name of the font in source.

weight number

The font’s weight, like 400 or 700. It picks which weight of a Google Font loads, and the text is drawn in that weight. Without it, headings are bold and body text regular.

source string

A font file: a path in your project or a URL. Without it, family is loaded from Google Fonts.

format "woff" | "woff2"

The type of the source file. Required with source.

heading object

family, weight, source and format for headings. Each one not set comes from the fields above.

body object

The same, for body text.

Code is always shown in a monospace font.

While the font loads

A web font arrives a moment after the page’s text does. Until then the text is shown in a font the reader’s device already has, and the page is laid out again when the web font arrives.

With the default font, Inter, that stand-in is sized to take the same space as Inter, so nothing on the page moves when Inter arrives. With another font, the text is first shown in the device’s own font, and lines can shift a little as yours loads - less so with a font file in your project, which loads from the same place as the page.