metabase / metabase/metabase

fontFamily in Embedding SDK theme should not auto-quote the value

Open Beginner friendly
#77,162 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

.Auto triaged .Team/Embedding Embedding/SDK Type:New Feature
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.