Using Custom Fonts in Dashboard Themes

Overview

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.

In this guide, you'll learn:

• How to use web-safe fonts
• How to import and use custom fonts
• Best practices and troubleshooting tips

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.

Available Web-Safe Fonts

Here are some commonly used web-safe fonts:

• 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)

Using Web-Safe Fonts in Your Theme

To use a web-safe font in your theme, 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 by following these two steps:

Step 1: Importing Custom Fonts

Add a CSS @import statement to your dashboard's theme using the custom_css property. Here's an example using the 'Silkscreen' font from Google Fonts:

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
5. Paste the @import statement into your theme's custom_css property

Step 2: Using the Custom Font in Your Theme

After importing the font, 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');
  ;;
}

Best Practices

Using Font Fallbacks

Always provide fallback fonts in case the primary font fails to load. End the list with a generic font family name:

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

Troubleshooting

If your custom fonts aren't working:

1. Verify the font URL is correct and accessible
2. Confirm the font name in your theme exactly matches the imported font name
3. Try refreshing your browser and the dashboard
4. Check that the @import statement is present in the custom_css property of your theme