dosubot[bot] commented on issue #38154:
URL: https://github.com/apache/superset/issues/38154#issuecomment-3938841632
<!-- 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%20
src%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)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
