mirror of
https://github.com/apache/superset.git
synced 2026-04-07 18:35:15 +00:00
feat: add runtime custom font loading via configuration (#34416)
This commit is contained in:
committed by
GitHub
parent
fd4570625a
commit
becd0b8883
@@ -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
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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') }}
|
||||
|
||||
Reference in New Issue
Block a user