ConfigurationCustomize branding

Custom colors, fonts, background image

Every Fern Docs website has a special configuration file called docs.yml. Use this file to update the colors, background image, and fonts for your documentation site.


Primary accent

You can specify a primary accent color using the hexadecimal color. The primary accent color is used for several purposes, including:

  • to indicate the page a user is on within the navigation
  • as the background of a primary link button
  • to underline hyperlinks
  • the next and previous page navigation buttons
2 accentPrimary: "#a6d388"


Just like accentPrimary, you can specify the background color using the hexadecimal color.

2 accentPrimary: "#a6d388"
3 background:
4 dark: "#0d0e11"
5 light: "#ffffff"

Background image

Include the background image or images in your fern/ project, then specify the path in docs.yml:

Example custom background images
1 fern/
2 ├─ openapi/
3 ├─ pages/
4+ ├─ images/
5+ ├─ bg-light.svg
6+ └─ bg-dark.svg
7 ├─ docs.yml
8 └─ fern.config.json

The PNG, SVG, and JPG image formats are supported.

Single background image

You can set a single background image for both light and dark modes:

1background-image: ./images/bg.svg

Light and dark mode background image

You can set a different background image for each mode:

2 light: ./images/bg-light.svg
3 dark: ./images/bg-dark.svg


You can specify custom fonts for your documentation website. The supported file types are .woff and .woff2.

Include the custom fonts in your fern/ project:

Example custom fonts
1 fern/
2 ├─ fern.config.json
3 ├─ generators.yml
4 ├─ openapi/
5 ├─ openapi.yml
6+ ├─ fonts/
7+ ├─ your-font-regular.woff2
8+ ├─ your-font-bold.woff2
9+ └─ another-font-regular.woff2

Fern has three font types:

  • headingsFont: affects page and section titles; if not supplied, defaults to the body font
  • bodyFont: affects paragraph text and other body text
  • codeFont: affects code blocks and inline code snippets

To customize the font used for each font type, add a top-level typography list to docs.yml. Then in it, specify the path of your font file for one or more of the font types.

A font has two properties:

  • name: the name of the font; defaults to a generated name that will be used to reference your custom font in the eventually injected CSS
  • path: the path to the font file
Example of specifying custom fonts in docs.yml
2 bodyFont:
3 name: Inter-Regular
4 path: ./fonts/Inter-Regular.woff2
5 headingsFont:
6 name: Inter-Bold
7 path: ./fonts/Inter-Bold.woff2
8 codeFont:
9 name: Roboto-Mono-Regular
10 path: ./fonts/Roboto-Mono-Regular.woff2
11 name: Roboto-Mono-Regular

If the font file is not variable, you can specify font weights.

A font path has three properties:

  • path: indicate that there are multiple font files
  • weight: a string of weights that are supported by this font file
  • style: the style of the font file, either normal or italic
Example of specifying font weights in docs.yml
2 bodyFont:
3 name: Inter-Regular
4 paths:
5 - path: ./fonts/Inter-Regular.woff2
6 weight: "400"
7 style: normal
8 - path: ./fonts/Inter-Bold.woff2
9 weight: 500 900 # <-- indicates a range of weights
10 style: normal