GitHub user dosubot[bot] added a comment to the discussion: loading custom
fonts from my host that affects whole superset
<!-- Answer -->
To load custom fonts locally in Superset 6.0.0, you'll need to mount your font
files and inject them via CSS. Here's how:
**1. Mount your fonts directory in `docker-compose.yml`:**
```yaml
volumes:
- ./fonts:/app/superset/static/assets/fonts
- ./custom-fonts.css:/app/superset/static/assets/custom-fonts.css
- ./spa.html:/app/superset/templates/superset/spa.html
- ./superset_config.py:/app/pythonpath/superset_config.py
```
**2. Create `custom-fonts.css` with `@font-face` rules:**
```css
@font-face {
font-family: 'MyCustomFont';
src: url('/static/assets/fonts/MyFont-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
```
Include weights 200, 400, 500, 600 for full UI coverage.
**3. Create `spa.html` to inject the CSS globally:**
```html
{% extends "superset/spa_base.html" %}
{% block head_extra %}
{{ super() }}
<link rel="stylesheet" href="/static/assets/custom-fonts.css">
{% endblock %}
```
**4. Configure the theme in `superset_config.py`:**
```python
THEME = {
"token": {
"fontFamily": "MyCustomFont, -apple-system, BlinkMacSystemFont,
sans-serif"
}
}
```
The key is that the [`THEME` token only sets the CSS `font-family` property—it
doesn't load the font
itself](https://github.com/apache/superset/discussions/34397#discussioncomment-13939721),
so you need both the `@font-face` rules and the template injection.
Note: Superset 6.0.0 has a [known issue where the default Inter font fails to
load](https://github.com/apache/superset/issues/37226), so using custom local
fonts actually bypasses this problem.
<!-- 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/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/5ea71081-4e14-40cb-8a8b-a7c940a3150a?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=To%20load%20custom%20fonts%20locally%20in%20Superset%206.0.0%2C%20you%27ll%20need%20to%20mount%20your%20font%20files%20and%20inject%20them%20via%20CSS.%20Here%27s%20how%3A%0A%0A%2A%2A1.%20Mount%20your%20fonts%20directory%20in%20%60docker-compose.yml%60%3A%2A%2A%0A%60%60%60yaml%0Avolumes%3A%0A%20%20-%20./fonts%3A/app/superset/static/assets/fonts%0A%20%20-%20./custom-fonts.css%3A/app/superset/static/assets/custom-fonts.css%0A%20%20-%20./spa.html%3A/app/superset/templates/superset/spa.html%0A%20%20-%20./superset_config.py%3A/app/pythonpath/superset_config.py%0A%60%60%60%0A%0A%2A%2A2.%20Create%20%60custom-fonts.css%60%20with%20%60%40font-face%60%20rules%3A%2A%2A%0A%60%60%60css%0A%40font-face%20%7B%0A%20%20font-family%3A%20%27MyCustomFont%27%3B%0A%20%20src
%3A%20url%28%27/static/assets/fonts/MyFont-Regular.woff2%27%29%20format%28%27woff2%27%29%3B%0A%20%20font-weight%3A%20400%3B%0A%20%20font-style%3A%20normal%3B%0A%7D%0A%60%60%60%0AInclude%20weights%20200%2C%20400%2C%20500%2C%20600%20for%20full%20UI%20coverage.%0A%0A%2A%2A3.%20Create%20%60spa.html%60%20to%20inject%20the%20CSS%20globally%3A%2A%2A%0A%60%60%60html%0A%7B%25%20extends%20%22superset/spa_base.html%22%20%25%7D%0A%0A%7B%25%20block%20head_extra%20%25%7D%0A%20%20%7B%7B%20super%28%29%20%7D%7D%0A%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22/static/assets/custom-fonts.css%22%3E%0A%7B%25%20endblock%20%25%7D%0A%60%60%60%0A%0A%2A%2A4.%20Configure%20the%20theme%20in%20%60superset_config.py%60%3A%2A%2A%0A%60%60%60python%0ATHEME%20%3D%20%7B%0A%20%20%20%20%22token%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22fontFamily%22%3A%20%22MyCustomFont%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20sans-serif%22%0A%20%20%20%20%7D%0A%7D%0A%60%60%60%0A%0AThe%20key%20is%20that%20the%20%5B%60THEME%60
%20token%20only%20sets%20the%20CSS%20%60font-family%60%20property%E2%80%94it%20doesn%27t%20load%20the%20font%20itself%5D%28https%3A//github.com/apache/superset/discussions/34397%23discussioncomment-13939721%29%2C%20so%20you%20need%20both%20the%20%60%40font-face%60%20rules%20and%20the%20template%20injection.%0A%0ANote%3A%20Superset%206.0.0%20has%20a%20%5Bknown%20issue%20where%20the%20default%20Inter%20font%20fails%20to%20load%5D%28https%3A//github.com/apache/superset/issues/37226%29%2C%20so%20using%20custom%20local%20fonts%20actually%20bypasses%20this%20problem.) [](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/issues/38154)
GitHub link:
https://github.com/apache/superset/discussions/38480#discussioncomment-16027091
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
