Using Custom Fonts in Dashboard Themes

Themes in Canvas Dashboard allow you to customize the look and feel of your dashboards, including the fonts used for various text elements. This guide will show you how to use both web-safe fonts and custom fonts to give your dashboards a unique appearance.

Using Web-Safe Fonts

By default, you can use several web-safe fonts in your themes. These fonts are widely available across different operating systems and browsers, ensuring consistent display for most users.

Some common web-safe fonts include:

• Inter (sans-serif - default Holistics font)
• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

To use a web-safe font in your theme, simply specify it in the font_family property:

theme: PageTheme {
  block {
    label {
      font_family: "Arial"
    }
    text {
      font_family: "Georgia"
    }
  }
}

Using Custom Fonts

For more unique typography, you can import and use custom fonts in your Canvas Dashboard with two steps:

1. Importing custom fonts
2. Using custom fonts in your theme

Step 1: Importing custom fonts

To import a custom font, you'll need to add a CSS @import statement to your dashboard. This is done by adding the @import statement to the custom_css property in the theme.

This example imports the 'Silkscreen' font from Google Fonts. You can replace the URL with any other font import URL you wish to use.

theme: PageTheme {
  custom_css: @css
    @import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
  ;;
}

How to import fonts from Google Fonts

1. Go to Google Fonts and search for the font you want to use.
2. Select the font you want to use.
3. Click on the Get font button.
4. Click on the Get embed code button and copy the @import statement to your clipboard.
5. Paste the @import statement into a TextBlock in your dashboard.

Step 2: Using the Custom Font in Your Theme

After importing the font, you can use it in your theme by specifying its name in the font_family property:

theme: PageTheme {
  block {
    label {
      font_family: "Silkscreen"
    }
    text {
      font_family: "Silkscreen"
    }
  }
  custom_css: @css
    @import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
  ;;
}

This will apply the Silkscreen font to all block labels and text in your dashboard.

Best Practices

Using Font Fallbacks: You can also list many fonts to provide “back-ups”. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

theme: PageTheme {
  block {
    label {
      font_family: "Playfair Display, Georgia, serif"
    }
  }
}

Troubleshooting

If you encounter issues with custom fonts:

1. Ensure the font URL is correct and accessible.
2. Check if the font name in your theme matches exactly with the imported font name.
3. Refresh your browser and the dashboard.
4. Verify the @import statement is present in the custom_css property of your theme.