Fonts and Typography

Emanote uses Maven Pro as the default font family throughout the site. The font files are self-hosted in the default layer to keep sites self-contained. If you want to customize the typography:

Changing the Font Family

To use a different font, create a templates/styles.tpl file in your notebook and override the global font styling (in default layer): 

<style data-category="global-font">
  /* Replace Maven Pro with your preferred font */
  body {
    font-family: 'Your Font Name', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }
</style>

Using Google Fonts

Create templates/styles.tpl with both the font import and the styling: 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style data-category="global-font">
  body {
    font-family: 'Inter', sans-serif;
  }
</style>

Self-hosting Custom Fonts

To self-host your own fonts like Maven Pro:

  • Create a _emanote-static/fonts/ directory in your notebook
  • Add your font files (.ttf, .woff2, etc.)
  • Create a CSS file with @font-face declarations
  • Import it in your templates/styles.tpl

See the Maven Pro font setup in the default layer for reference.

Links to this page
  • Layer system

    Emanote implicitly includes what is known as the “default” layer. Its contents can be seen here. This layer contains HTML Templates, index.yaml and other default assets, like the logo, favicon and fonts. When you run emanote -L /your/notebook run, your notebook is overlaid on top of this default layer. What this means, in effect, is that you override just about any file in the default layer, such the HTML content of HTML Templates, in your own notebook directory. As an example, see template/hooks of this documentation notbook.