Using custom CSS and fonts

In cases where customizing only the colors of your docs isn't enough, we allow adding your own custom CSS for further customization.

Note: don't rely on any classes generated by Doctave as they're subject to change and doing so may break your docs.

Custom CSS

You can tell Doctave to include your own custom CSS files in your site, which gives you a lot of freedom to customize the look of your site.

To include a CSS file:

  1. Place the file in your _assets directory (for example _assets/styles.css).
  2. Specify the CSS file in your doctave.yaml

You can specify your styles in your doctave.yaml file under the styles key:

title: My Docs
...
styles:
  - _assets/styles.css

Note that:

  • The CSS file must to be in the _assets directory
  • The file must be a plain CSS file, and can't include for example SASS syntax
  • Inline style with a style tag isn't supported

Using theme colors in CSS

The theme colors are all accessible as CSS variables.

To reference a particular variable, prepend doctave-theme- to the name of it, and change all underscores to hyphens.

For example, to reference the main variable, you can use:

background: var(--doctave-theme-main);
                                ^^^^

Custom Fonts

By default Doctave falls back to the reader's operating system's native font. This gives a generally clean and modern look on all platforms, but you can alternatively provide your own font for Doctave to use.

Custom fonts are handled directly in CSS. All you have to do is:

  1. Add you font file(s) to the _assets directory
  2. Have a custom CSS file
  3. Define and load the font in the CSS file
  4. Define which elements should use your font

Example

Say you want to make your headings a bit more space-like, and decide you want to use the Nasalization font in your docs.

First, download the font definition. In our case we're given a single file called nasalization-rg.otf. Place this in your project's _assets directory.

Next, create a custom CSS file as described in the custom fonts section above, and create a @font-face declaration at the top of the file.

Two important things to note:

  1. Ensure you prefix the path to the font with a slash, so it's loaded from the root of the domain
  2. Check that your format matches the font definition type you are dealing with.

If you want to learn more, we recommend this crash course on using custom fonts

@font-face {
  font-family: 'Nasalization';
  src: url('/_assets/nasalization-rg.otf') format("opentype");
}

Finally, define in the same file which elements should use your font. In our case we only want to hit header tags:

h1,h2,h3,h4 {
  font-family: 'Nasalization';
}

You should now see your custom font rendered.

Was this page helpful?

On this page