🔠 Using Custom Fonts in Canvas Dashboard Themes

Tips and Hacks
1

Canvas Dashboard Themes 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. This process involves two steps:

  1. Importing the font
  2. Using the font in your theme

Step 1: Importing a Custom Font

To import a custom font, you’ll need to add a CSS @import statement to your dashboard. This is done by creating a TextBlock with the import statement:

block css: TextBlock {
  content: @md
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
    </style>
  ;;
}

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

:bulb: Tip
You can drag this TextBlock outside of the canvas to hide it from view

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"
    }
  }
}

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 that the TextBlock with the @import statement is present in your dashboard.

I hope this guide empowers you to design customized, professional-looking dashboard themes that perfectly align with your corporate identity. Happy designing! :art::sparkles:

2 Likes