GitHub user dosubot[bot] added a comment to the discussion: Recommended approach to add custom fonts with the new theming system and frontend structure
<!-- Greeting --> Hi @VasilijeBursac! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> The most future-proof way to load custom fonts in Superset’s new theming system is to import your font files (via @fontsource, a CSS file, or @font-face) at the top of Theme.tsx in the frontend. This ensures the fonts are available globally and can be referenced in the Ant Design fontFamily token in your theme JSON or config. The theme token only sets the CSS font-family property; it does not load the font itself—so you must ensure the font is loaded before referencing it in the theme config. For local fonts, place your font files in /static/assets/fonts/, create a CSS file with @font-face rules pointing to those files, and import that CSS file at the top of Theme.tsx. For external fonts (like Google Fonts or @fontsource), import the relevant CSS or JS package at the top of Theme.tsx as well. If you use Google Fonts or another CDN, make sure to update the Content Security Policy (CSP) in TALISMAN_CONFIG in config.py to allow those font sources, or the browser will block them [example](https://github.com/apache/superset/issues/31597). You do not need to maintain a custom fork if you can inject your font imports early in the frontend entry hierarchy or via a plugin, but to guarantee global font availability for all users, a minimal code change—importing your font CSS or @fontsource package in Theme.tsx—is the standard approach [example](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx). Theme.tsx is the canonical place for these imports in the new setup. Once the font is loaded, set the fontFamily token in your theme JSON/config to the font’s CSS name (e.g., 'My Custom Font', Arial, sans-serif). This will apply it globally via the theming system [example](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts). There’s no built-in mechanism to load fonts via theme JSON alone; font files must be loaded separately and referenced by name in the theme config. This approach is reusable across projects: just import your font(s) in Theme.tsx and reference them in your theme tokens. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/1dbd41a8-ce83-4103-9bdc-5ebca445bef6?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)& nbsp;[](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/34397) GitHub link: https://github.com/apache/superset/discussions/34397#discussioncomment-13932251 ---- This is an automatically sent email for notifications@superset.apache.org. To unsubscribe, please send an email to: notifications-unsubscr...@superset.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
