From becd0b88837a724f416a2535dcd35c407e0700a2 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Wed, 30 Jul 2025 18:01:37 -0700
Subject: [PATCH] feat: add runtime custom font loading via configuration
 (#34416)

---
 docs/docs/configuration/theming.mdx  | 58 ++++++++++++++++++++++++++++
 superset/config.py                   | 10 +++++
 superset/templates/superset/spa.html |  7 ++++
 3 files changed, 75 insertions(+)

diff --git a/docs/docs/configuration/theming.mdx b/docs/docs/configuration/theming.mdx
index 8ffb1ddba97..5064e2e87c9 100644
--- a/docs/docs/configuration/theming.mdx
+++ b/docs/docs/configuration/theming.mdx
@@ -87,8 +87,66 @@ Restart Superset to apply changes.
 3. **Apply**: Assign themes to specific dashboards or configure instance-wide
 4. **Iterate**: Modify theme JSON directly in the CRUD interface or re-import from the theme editor
 
+## Custom Fonts
+
+Superset supports custom fonts through runtime configuration, allowing you to use branded or custom typefaces without rebuilding the application.
+
+### Configuring Custom Fonts
+
+Add font URLs to your `superset_config.py`:
+
+```python
+# Load fonts from Google Fonts, Adobe Fonts, or self-hosted sources
+CUSTOM_FONT_URLS = [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap",
+]
+
+# Update CSP to allow font sources
+TALISMAN_CONFIG = {
+    "content_security_policy": {
+        "font-src": ["'self'", "https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+        "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+    }
+}
+```
+
+### Using Custom Fonts in Themes
+
+Once configured, reference the fonts in your theme configuration:
+
+```python
+THEME_DEFAULT = {
+    "token": {
+        "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+        "fontFamilyCode": "JetBrains Mono, Monaco, monospace",
+        # ... other theme tokens
+    }
+}
+```
+
+Or in the CRUD interface theme JSON:
+
+```json
+{
+  "token": {
+    "fontFamily": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+    "fontFamilyCode": "JetBrains Mono, Monaco, monospace"
+  }
+}
+```
+
+### Font Sources
+
+- **Google Fonts**: Free, CDN-hosted fonts with wide variety
+- **Adobe Fonts**: Premium fonts (requires subscription and kit ID)
+- **Self-hosted**: Place font files in `/static/assets/fonts/` and reference via CSS
+
+This feature works with the stock Docker image - no custom build required!
+
 ## Advanced Features
 
 - **System Themes**: Superset includes built-in light and dark themes
 - **Per-Dashboard Theming**: Each dashboard can have its own visual identity
 - **JSON Editor**: Edit theme configurations directly within Superset's interface
+- **Custom Fonts**: Load external fonts via configuration without rebuilding
diff --git a/superset/config.py b/superset/config.py
index 273f2232da8..d42aadbba39 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -762,6 +762,16 @@ THEME_SETTINGS = {
     "allowSwitching": True,  # Allows user to switch between themes (default and dark)  # noqa: E501
     "allowOSPreference": True,  # Allows the app to Auto-detect and set system theme preference  # noqa: E501
 }
+
+# Custom font configuration
+# Load external fonts at runtime without rebuilding the application
+# Example:
+# CUSTOM_FONT_URLS = [
+#     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+#     "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap",
+# ]
+CUSTOM_FONT_URLS: list[str] = []
+
 # ---------------------------------------------------
 # EXTRA_SEQUENTIAL_COLOR_SCHEMES is used for adding custom sequential color schemes
 # EXTRA_SEQUENTIAL_COLOR_SCHEMES =  [
diff --git a/superset/templates/superset/spa.html b/superset/templates/superset/spa.html
index 32af9f5aae1..c64c61cdd3c 100644
--- a/superset/templates/superset/spa.html
+++ b/superset/templates/superset/spa.html
@@ -47,6 +47,13 @@
         as="style"
       />
 
+      {# Load custom fonts from configuration #}
+      {% if appbuilder.app.config.get('CUSTOM_FONT_URLS') %}
+        {% for font_url in appbuilder.app.config['CUSTOM_FONT_URLS'] %}
+          <link rel="stylesheet" href="{{ font_url }}" />
+        {% endfor %}
+      {% endif %}
+
     {% endblock %}
 
     {{ js_bundle(assets_prefix, 'theme') }}