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.

How To Find the Information in Google Fonts

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.

Some Example Custom Fonts

To set the font to "Roboto" you would add code that looks like this to the Advanced Design › Page CSS section here in Settings › Branding:

@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;
}

Here's how those custom fonts would look on a quote in client access:

Custom fonts will be used in all of your client access page, including any embedded contact forms on your website. This is a great way to have your embedded contact form tie in with your website branding.

Here's how those example fonts above would look on an embedded contact form:

Please don’t hesitate to reach out to the Táve Support team if you need assistance, by clicking on Support in the top menu. 🙂