fix: prevent browser font synthesis for MMPoly font weights#40349
Merged
fix: prevent browser font synthesis for MMPoly font weights#40349
Conversation
Add explicit @font-face declarations for font-weight 500 and 700 for the MMPoly font family, both pointing to the Regular font file. This prevents browsers from artificially synthesizing bold text when the DisplayMd typography variant applies font-weight: 700 on small screens (<768px). Without these declarations, browsers create synthetic bold rendering which results in blurry and muddy text appearance, particularly noticeable with uppercase transformations on mobile devices. This is a temporary fix until the MMPoly variable font can be implemented to support the full weight range properly. Fixes: MetaMask/metamask-design-system#928 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/core-extension-ux (1 files, +22 -0)
|
| font-style: normal; | ||
| } | ||
|
|
||
| // Additional weight declarations to prevent browser font synthesis |
Contributor
Author
There was a problem hiding this comment.
This is a temporary fix that maps multiple font weights to the same font file. The ideal long-term solution would be using MM_Poly-Variable.woff2 which supports the full weight range natively.
| // By explicitly mapping weights 500 and 700 to the Regular font file, we ensure | ||
| // consistent rendering quality across all screen sizes. | ||
| // See: https://github.com/MetaMask/metamask-design-system/issues/928 | ||
| @font-face { |
Contributor
Author
There was a problem hiding this comment.
Weight 500 is used by DisplayMd on larger screens. Explicitly declaring this weight prevents the browser from interpolating between weights, which would cause subtle rendering inconsistencies.
| font-weight: 500; | ||
| font-style: normal; | ||
| } | ||
|
|
Contributor
Author
There was a problem hiding this comment.
Weight 700 is applied on small screens (< 768px). Without this declaration, browsers would synthesize bold rendering by algorithmically thickening the font, causing the blurry appearance reported in the issue.
|
brianacnguyen
approved these changes
Feb 23, 2026
Contributor
Builds ready [184d6ed]
⚡ Performance Benchmarks (1431 ± 108 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
n3ps
approved these changes
Feb 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes a font rendering issue where the MMPoly font was being artificially synthesized by browsers, resulting in blurry and muddy text appearance on mobile devices.
The problem occurs because the DisplayMd typography variant applies
font-weight: 700on small screens (<768px) andfont-weight: 500on larger screens, but only the Regular (400) weight was loaded for MMPoly. This caused browsers to synthesize the bold text artificially.The solution adds explicit
@font-facedeclarations for weights 500 and 700, both pointing to the Regular font file. This tells browsers to use the exact font file rather than creating synthetic bold rendering.Changelog
CHANGELOG entry: Fixed blurry MMPoly font rendering on mobile devices by preventing browser font synthesis
Related issues
Part of: MetaMask/metamask-design-system#928
Manual testing steps
Screenshots/Recordings
Before
Text appeared blurry and muddy due to browser-synthesized bold rendering
text.fix.before720.mov
After
Text renders clearly using the explicit Regular font file for all weights
text.fix.after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
CSS-only change that maps additional
MMPolyweights to an existing font file; low risk aside from potential minor typography/weight appearance differences.Overview
Prevents browsers from synthesizing
MMPolybold/medium weights (which caused blurry text in responsive typography).Adds explicit
@font-facedeclarations forMMPolyat weights500and700, both pointing to the existing Regular.woff2, with inline documentation referencing the design-system issue.Written by Cursor Bugbot for commit 184d6ed. This will update automatically on new commits. Configure here.