fontFamily in Embedding SDK theme should not auto-quote the value
Nobody has claimed this yet.
- Dominant language
- Clojure
- Stars
- 49.3k
- Forks
- 6.8k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 653
Description
**What problem will this feature request solve?**
When using defineMetabaseTheme with the fontFamily option, the getFontFamilyValue() function in `frontend/src/metabase/utils/fonts.ts` always wraps the entire value in double quotes before setting it as the CSS variable --mb-default-font-family. Per the MDN docs on font-family, quotes are only required for font names containing whitespace — the developer should determine when quotes are needed, not the framework. This breaks multiple fallback fonts (`"Lato, Roboto"` becomes a single font name instead of two), double-quotes pre-quoted names (`"Helvetica Neue"` becomes `""Helvetica Neue""`), and makes the hardcoded fallback chain unconfigurable
**Describe the solution you'd like.**
The fontFamily value from the theme config should be passed through to the CSS variable --mb-default-font-family without automatic quoting. This would let developers control their own font stacks with proper fallbacks, avoid double-quoting, and be more aligned with how CSS font-family actually works. Single font names like Lato would still work fine since quotes are optional in CSS for names without spaces.
**How does this feature request impact you?**
It blocks us from using proper font fallback chains in our embedded dashboards.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in frontend/src/metabase/utils/fonts.ts at getFontFamilyValue(), then trace where it sets --mb-default-font-family for defineMetabaseTheme. Check how the current value is transformed before reaching the CSS variable. Done means theme-provided font stacks pass through without automatic quoting, including fallback lists and already-quoted names.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 76/100