Changing Superset UI wont work

[acolgecen]

Bug description

I'm experiencing issues with applying custom fonts to the Superset UI using THEME_OVERRIDES in the superset_config.py file. The configuration settings seem to be recognized, as other aspects of the theme (such as colors and border radius) apply successfully. However, custom fonts (e.g., Roboto from Google Fonts or a local URL) do not render in the UI.

Steps to Reproduce:
1. Add the following configuration to superset_config.py to enable custom theming:

ENABLE_CSS = True
CUSTOM_CSS = True

THEME_OVERRIDES = {
    "typography": {
        "families": {
            "sansSerif": "Roboto, sans-serif",
            "monospace": "Roboto, monospace"
        },
        "weights": {
            "normal": 400,
            "bold": 700
        }
    },
    "importFonts": [
        "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    ],
    "css": [
        """
        @font-face {
            font-family: 'Roboto';
            src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        body, .ant-typography, .ant-typography-title, .ant-typography-paragraph { 
            font-family: 'Roboto', sans-serif !important; 
        }
        """
    ]
}

2. Restart Superset.

3. Perform a hard refresh in the browser to clear cache.

4. Inspect the UI text elements (using browser Developer Tools) to verify if Roboto is applied.

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.10

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @acolgecen! 👋 I'm here to help you with any bugs, questions, or becoming a contributor. Let's squash those bugs together!

The issue you're experiencing with custom fonts not rendering in Superset's UI might be related to the Content Security Policy (CSP) settings. Superset's TALISMAN_CONFIG includes a CSP that restricts the sources from which styles can be loaded. By default, the style-src directive allows styles only from 'self' and 'unsafe-inline', which would block external font URLs like those from Google Fonts unless explicitly allowed ^[1].

To resolve this, you can modify the TALISMAN_CONFIG in your superset_config.py to include the Google Fonts URL in the style-src directive. Here's an example of how you might adjust the configuration:

TALISMAN_CONFIG = {
    "content_security_policy": {
        "style-src": [
            "'self'",
            "'unsafe-inline'",
            "https://fonts.googleapis.com",
            "https://fonts.gstatic.com"
        ],
    },
}

After making these changes, restart Superset and perform a hard refresh in your browser to see if the custom fonts are applied correctly.

To continue talking to Dosu, mention @dosu.

[rusackas]

Dosu might be right here... but you can check your CSS inspector to see if something else might be wining in CSS selector precedence, or if it's indeed just unable to load the file(s).

Also, note that a lot of this is more "beta" than solidified... we have a long way to go yet for proper theming support.

[acolgecen]

I will take look on the CSS and wilde also apply what Dosu mentioned about Talisman.
Will react when it worked or not.

[acolgecen]

I’ve been unsuccessful in changing the font on the Superset UI. Has anyone successfully configured a font using a different approach?