mirror of
https://github.com/apache/superset.git
synced 2026-04-19 08:04:53 +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
|
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
|
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
|
## Advanced Features
|
||||||
|
|
||||||
- **System Themes**: Superset includes built-in light and dark themes
|
- **System Themes**: Superset includes built-in light and dark themes
|
||||||
- **Per-Dashboard Theming**: Each dashboard can have its own visual identity
|
- **Per-Dashboard Theming**: Each dashboard can have its own visual identity
|
||||||
- **JSON Editor**: Edit theme configurations directly within Superset's interface
|
- **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
|
"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
|
"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 is used for adding custom sequential color schemes
|
||||||
# EXTRA_SEQUENTIAL_COLOR_SCHEMES = [
|
# EXTRA_SEQUENTIAL_COLOR_SCHEMES = [
|
||||||
|
|||||||
@@ -47,6 +47,13 @@
|
|||||||
as="style"
|
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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{{ js_bundle(assets_prefix, 'theme') }}
|
{{ js_bundle(assets_prefix, 'theme') }}
|
||||||
|
|||||||
Reference in New Issue
Block a user