feat(web): add UI and code font family settings - #4377

Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom
harssha6:feat/settings-font-families
Closed

feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom
harssha6:feat/settings-font-families

Conversation

@harssha6

@harssha6harssha6 commented Jul 23, 2026•
edited by macroscopeapp Bot
Loading

Copy link
Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.

Before

Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.

After

Settings with System UI + Geist Mono

Code font preset dropdown with Aa samples

What changed

  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts

Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.

Test plan

  • Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  • Manual: Settings → General shows UI font + Code font with Aa tiles
  • Manual: System UI + Geist Mono persist across reload and update CSS vars
  • Reviewer: try Custom with a locally installed font name

Made with Cursor

Note

Add UI and code font family settings to the General settings panel

  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.

Macroscope summarized 2bb74d9.

@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai

coderabbitaiBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 199895d7-bb45-4659-8219-080b0bd3464f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actionsgithub-actionsBot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot reviewed Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot reviewed Jul 23, 2026
View reviewed changes

@cursorcursorBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit faa3230. Configure here.

Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp

macroscopeappBot commented Jul 23, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Needs human review

New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.

You can customize Macroscope's approvability policy. Learn more.

@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6

harssha6 commented Jul 23, 2026

Copy link
Copy Markdown
Author

Addressed the review findings:

  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.

@t3dotgg

t3dotgg commented Aug 23, 2026

Copy link
Copy Markdown
Member

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.

@t3dotggt3dotgg closed this Aug 23, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees

No one assigned

Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)

2 participants

@harssha6@t3dotgg
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(web): add UI and code font family settings - #4377
Closed
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Closed
feat(web): add UI and code font family settings#4377
harssha6 wants to merge 2 commits into
pingdotgg:mainfrom 
harssha6:feat/settings-font-families
Conversation
@harssha6
@harssha6harssha6
commented
Jul 23, 2026•

edited by macroscopeapp
Bot
Loading

Copy link


Copy Markdown

Adds General settings for UI and code font families (presets + custom local font names), with live Aa preview tiles. Fixes#4376.
Before
Settings → General had Theme / Glass opacity / Word wrap, but no way to change --font-sans or --font-mono. Agent replies and code blocks always used the hardcoded stacks.
After
Settings with System UI + Geist Mono
Code font preset dropdown with Aa samples
What changed
  • Client settings: uiFontFamily / codeFontFamily (empty = bundled default)
  • Apply via CSS vars on :root, same pattern as glass opacity
  • body now uses var(--font-sans) so UI/chat text actually follows the setting
  • Presets + Custom local name + Aa preview tile (matches select height)
  • Shipping default stays DM Sans / current mono stack; Geist is opt-in via local fonts
Happy to drop the docs/pr-media/ screenshots from the tree after review if preferred.
Test plan
  •  Focused tests: packages/contracts/src/settings.test.ts, apps/web/src/fontPreferences.test.ts
  •  Manual: Settings → General shows UI font + Code font with Aa tiles
  •  Manual: System UI + Geist Mono persist across reload and update CSS vars
  •  Reviewer: try Custom with a locally installed font name
Made with Cursor
Note
Add UI and code font family settings to the General settings panel
  • Adds uiFontFamily and codeFontFamily fields to ClientSettingsSchema and ClientSettingsPatch in settings.ts, with a max length of 80 characters.
  • Introduces fontPreferences.ts with utilities to sanitize, match, resolve, and apply font preferences as CSS variables (--font-sans, --font-mono).
  • Replaces hardcoded font stacks in index.css with var(--font-sans) and var(--font-mono) so user preferences take effect globally.
  • Adds a FontAppearanceSync component in __root.tsx that syncs font settings to CSS variables on every settings change.
  • Adds FontFamilySettingControl and FontFamilyPreviewTile components in SettingsPanels.tsx, exposing preset and custom font controls for both UI and code fonts in the General settings panel.
Macroscope summarized 2bb74d9.
@harssha6@cursoragent
feat(web): add UI and code font family settings
faa3230
Let users pick UI and mono fonts from General settings via presets or a
custom locally installed font name, with live Aa preview tiles.
Co-authored-by: Cursor <cursoragent@cursor.com>
@coderabbitai
coderabbitaiBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Important
Review skipped
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 199895d7-bb45-4659-8219-080b0bd3464f
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
  •  🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  •  Create PR with unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
@github-actionsgithub-actionsBot
added

vouch:unvouched
PR author is not yet trusted in the VOUCHED list.
size:L
100-499 changed lines (additions + deletions).
labels
Jul 23, 2026
macroscopeapp[bot]
macroscopeappBot
reviewed
Jul 23, 2026
View reviewed changes
Comment threadapps/web/src/routes/__root.tsx
cursor[bot]
cursorBot
reviewed
Jul 23, 2026
View reviewed changes
@cursorcursorBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
Fix All in Cursor
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit faa3230. Configure here.
Comment threadapps/web/src/index.css
Comment threadapps/web/src/components/settings/SettingsPanels.tsx
@macroscopeapp
macroscopeappBot
commented
Jul 23, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Approvability
Verdict: Needs human review
New feature adding UI and code font family settings with new components, schema fields, and CSS variable application. New user-facing features warrant human review regardless of implementation quality.
You can customize Macroscope's approvability policy. Learn more.
@harssha6@cursoragent
fix(web): address font settings review findings
2bb74d9
Apply font prefs on pair/unauth routes, route markdown pre/code through
--font-mono, and seed Custom with the current font so blur doesn't wipe it.
Co-authored-by: Cursor <cursoragent@cursor.com>
@harssha6
harssha6
commented
Jul 23, 2026

Copy link


Copy Markdown

Author
Addressed the review findings:
  1. Font sync on pair/unauth routes — FontAppearanceSync now mounts alongside DocumentTitleSync on those early-return branches.
  2. Code blocks ignore setting — pre, code now use var(--font-mono) instead of a hardcoded stack.
  3. Custom clears prior choice — opening Custom seeds the input with the current preference, so blur without edits keeps the previous font.
@t3dotgg
t3dotgg
commented
Aug 23, 2026

Copy link


Copy Markdown

Member
Note
🤖 GPT-5.6 Sol responding on behalf of Theo
Closing this PR after an automated pass over open pull requests. Configurable application and code font families already shipped in #5103.
@t3dotggt3dotgg
closed this
Aug 23, 2026
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@macroscopeappmacroscopeapp[bot]macroscopeapp[bot] left review comments
@cursorcursor[bot]cursor[bot] left review comments

Assignees


No one assigned


Labels

size:L100-499 changed lines (additions + deletions).vouch:unvouchedPR author is not yet trusted in the VOUCHED list.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Settings: choose UI and code font families (presets + custom local fonts)


2 participants

@harssha6@t3dotgg