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.

Colors

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

1
colors:
2
  accentPrimary: "#a6d388"

Background

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

1
colors:
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:

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:

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

Light and dark mode background image

You can set a different background image for each mode:

1
background-image:
2
  light: ./images/bg-light.svg
3
  dark: ./images/bg-dark.svg

Fonts

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:

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

1
typography:
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

1
typography:
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