Custom Fonts | Táve Support

Táve allows you to customize the font displayed on client access pages with CSS added to the Page CSS section of the Advanced Design Editor that you'll find at the bottom of your branding settings for each brand.

Currently, this does not affect emails and PDFs. If you want custom email fonts take a look at the example provided in our Custom CSS article!

You can set a custom font to use for your client access pages by adding the @import CSS provided by Google Fonts as well as a body selector that includes a setting for the headline-font, default-font, and the monospace-font:

@import url('https://fonts.googleapis.com/css2?family=family+name');

body {
  --headline-font: 'family name', sans-serif;
  --default-font: 'family name', sans-serif;
  --monospace-font: 'family name', monospace;
}

Using the template above, you would want to replace 'family name' and 'generic-family' so that it matches the font that you've added.

To get the @import CSS and font names, you can go to Google Fonts to first select one or more fonts:

Once selected, use the View Selected Family button on the sidebar and click the radio option for @import to display the CSS import and the family names that you'll need.

Examples

To set the font to "Roboto" you would add code that looks like this to the Page CSS section of your Branding settings:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
  --headline-font: 'Roboto', sans-serif;
  --default-font: 'Roboto', sans-serif;
  --monospace-font: 'Roboto', sans-serif;
}

This also means that you can set a different font for headlines, regular text, and for monospace (typically used by Táve for the display of things like currencies or token output).

For example, this code sets "Caveat, cursive" as the font for headlines, "Playfair Display, serif" for regular text, and "Cutive Mono, monospace" for any monospace fonts.

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cutive+Mono&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

body {
 --headline-font: 'Caveat', cursive;
 --default-font: 'Playfair Display', serif;
 --monospace-font: 'Cutive Mono', monospace;
}