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.
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:
- Place the file in your
_assetsdirectory (for example
- Specify the CSS file in your
You can specify your styles in your
doctave.yaml file under the
title: My Docs
- The CSS file must to be in the
- The file must be a plain CSS file, and can't include for example SASS syntax
- Inline style with a
styletag isn't supported
Using theme colors in CSS
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:
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:
- Add you font file(s) to the
- Have a custom CSS file
- Define and load the font in the CSS file
- Define which elements should use your font
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
nasalization-rg.otf. Place this in your project's
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:
- Ensure you prefix the path to the font with a slash, so it's loaded from the root of the domain
- 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
Finally, define in the same file which elements should use your font. In our case we only want to hit header tags:
You should now see your custom font rendered.
Was this page helpful?