# Fonts

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Use a Google Font, your own font file, or a hosted font - for the whole site, or separately for headings and body text.

Sites use [Inter](https://fonts.google.com/specimen/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](https://fonts.google.com), and it's loaded for you:

```json
{
  "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:

```json
{
  "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:

```json title="A file in the project"
{
  "styles": {
    "fonts": {
      "family": "Acme Sans",
      "source": "/fonts/AcmeSans-Regular.woff2",
      "format": "woff2",
      "weight": 400
    }
  }
}
```

```json title="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](https://preview.writedocs.io/docs/configuration/logo-and-favicon/#paths-to-images).

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