# Using Custom Fonts in Dashboard Themes

> Learn how to use custom fonts to give your dashboards a unique appearance

## Overview

Typography is one of the strongest signals of brand identity in a dashboard. [Dashboard themes](/docs/admin/dashboard-themes/index.md) let you set the fonts used across your workspace: pick from web-safe defaults, or import a custom font to match your company's typography.

In this guide, you'll learn:
- How to use web-safe fonts
- How to import and use custom fonts
- Best practices and troubleshooting tips

<VideoPlayer src="https://cdn.holistics.io/product/reporting-themes-custom-fonts-20240917-293.mp4" />

## 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:

```tsx
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:

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

<details>
<summary>How to import fonts from Google Fonts</summary>

1. Go to [Google Fonts](https://fonts.google.com/) 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

<VideoPlayer src="https://cdn.holistics.io/product/reporting-themes-custom-fonts-import-google-fonts-20240918-294.mp4" />

</details>

### 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:

```tsx
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:

```tsx
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