Typography

Set heading and body typography for your entire Lettercamp publication. In Settings → Design → Customize → Content, choose separate heading and body fonts. Search the Google Fonts list or upload a TTF, OTF, WOFF, or WOFF2 file within your site’s upload limit. Selecting a font updates your draft; Publish makes it live. See Supported fonts for the complete built-in list.

Font settings

Set design.typography in settings.json:

{
  "design": {
    "typography": {
      "headingFont": {
        "google": "Inter"
      },
      "bodyFont": {
        "google": "Inter"
      },
      "headingColor": "",
      "bodyColor": "",
      "headingBaseSizePx": 18,
      "bodyBaseSizePx": 16,
      "bodyLineHeight": 1.8
    }
  }
}

Field	Default	Purpose
`headingFont`	`{ "google": "Inter" }`	Font for page titles, post cards, and article headings.
`bodyFont`	`{ "google": "Inter" }`	Font for body text, navigation, buttons, and supporting text.
`localFonts`	`false`	Load catalog fonts from `public/fonts/`. The CLI starter sets this to `true`; Cloud requires `false` or omission.
`headingColor`	`""` (automatic)	Color for page titles, post-card titles, and article headings.
`bodyColor`	`""` (automatic)	Color for primary body text. Supporting text retains its muted colors.
`headingBaseSizePx`	`18`	Minimum grid title size in pixels at the standard browser text size. Other titles and headings scale proportionally.
`bodyBaseSizePx`	`16`	Body text size in pixels at the standard browser text size. Summaries, navigation, metadata, and footer links scale from this base.
`bodyLineHeight`	`1.8`	Article line spacing as a multiple of its font size.

Custom fonts

For a hosted font, use { "url": "https://example.com/brand.woff2", "name": "Brand" }. Variable fonts can include "weight": "100 900"; uploads detect this automatically. The host must allow cross-origin font requests. Single-face fonts use browser-synthesized bold and italic when needed. Code blocks keep their monospace font. For local previews and standalone builds, put a custom font in public/fonts/ and use { "url": "/fonts/brand.woff2", "name": "Brand" }. Before publishing to Cloud, upload the font and replace this path with its hosted URL.

Local fonts

The CLI starter sets design.typography.localFonts to true and bundles the files for Inter, Geist, Geist Mono, Instrument Serif, and EB Garamond in public/fonts/. These cover all starter presets and load from your own site in previews and standalone builds. When you choose another catalog family, set localFonts to false to load it from Lettercamp’s CDN, or provide its font files at the matching paths in public/fonts/. Setting localFonts does not download missing font files. Before deploying to Lettercamp Cloud, set localFonts to false or remove it. Cloud does not serve public/fonts/; this setting lets the same selected families use hosted files. It does not change custom url values, which must also point to hosted fonts.

Size and line spacing

Under Content on either the Home or Post tab, set Heading base size (px) beside Heading font, and Body size (px) beside Body font. Set Body line height beneath the body controls. These settings apply across your site and in the editor when site styles are enabled. Changing a font keeps its role’s size setting.

Text colors

Set Heading color below heading size and Body color below body size. Each defaults independently to Automatic, choosing black or white for contrast against your background. The swatch shows the resolved color. Choosing one color does not change the other; a custom color stays fixed when the background changes. Click Use automatic color in a customized picker to restore the default. In settings.json, use a six-digit hex color for headingColor or bodyColor. Omit a field or set it to "" for automatic color. For example, this sets both roles to brown on a sand background:

{
  "design": {
    "backgroundColor": "#FCF0DA",
    "accentColor": "#994636",
    "typography": {
      "headingColor": "#543712",
      "bodyColor": "#543712"
    }
  }
}

These colors apply in the design preview, the editor with site styles enabled, and sites built with npx lettercamp dev or npx lettercamp build. Supporting text, such as summaries, metadata, and captions, keeps its automatic muted treatment. Individually colored article text keeps its explicit color. Accent hovers, selection colors, and contrasting button labels keep their existing behavior. Choose custom text colors that are readable against your background.

Responsive sizes

The two sizes are independent, even when you select the same font for both roles. headingBaseSizePx sets the smaller end of the responsive grid title size. With the heading base at 18 and body base at 16, page titles range from 32 to 42px, grid titles from 18 to 20px, and wide-row titles are 24px. Article H2, H3, H4, H5, and H6 sizes are 30, 24, 20, 18, and 16px. Page titles and grid titles also adapt to the viewport. A 21px heading base makes an H2 35px while a 16px body base keeps paragraphs at 16px and listing summaries at 15px. Navigation, table-of-contents labels, and footer labels use the body font and scale. Reading width (em) follows the body size; changing the heading base does not change the reading column’s width. Font sizes in these scales use rem so browser text-size preferences still apply. Use positive numbers; omitted or invalid values fall back to the defaults. Omit design.typography entirely to use Inter and the default sizes.

Supported fonts

Choose any of these 40 built-in font families for headings, body text, or both. They are available in the design modal’s Google Fonts tab and, with localFonts disabled, served from Lettercamp’s asset CDN. You do not need to upload a font file or provide a Google API key. The same families work in the editor, published sites, npx lettercamp dev, and npx lettercamp build.

Style	Font families
Sans serif	Atkinson Hyperlegible Next, DM Sans, Figtree, Geist Sans, IBM Plex Sans, Inter, Lato, Manrope, Montserrat, Noto Sans, Nunito Sans, Open Sans, Outfit, Plus Jakarta Sans, Poppins, Raleway, Roboto, Source Sans 3, Work Sans
Serif	Bitter, Crimson Pro, DM Serif Display, EB Garamond, IBM Plex Serif, Instrument Serif, Libre Baskerville, Literata, Lora, Merriweather, Newsreader, Noto Serif, Playfair Display, Roboto Slab, Source Serif 4
Monospace	Fira Code, Geist Mono, IBM Plex Mono, JetBrains Mono, Roboto Mono, Source Code Pro

In settings.json, use the exact family name with the google field in design.typography.headingFont or design.typography.bodyFont. Geist Sans is the one display-name exception: use "Geist" in your settings. For example, pair Instrument Serif headings with EB Garamond body text:

{
  "design": {
    "typography": {
      "headingFont": { "google": "Instrument Serif" },
      "bodyFont": { "google": "EB Garamond" }
    }
  }
}

With localFonts disabled, font names outside this list use the external Google Fonts loader. You can also upload a custom font or supply an HTTPS font-file URL as described above.

Getting started

Writing

Content components

Design

Site settings

Custom components

Publishing

CLI