Description

The MMPoly Hero font only has weight 400 loaded in the font stack, but the DisplayMd typography variant applies font-weight: 700 at small screen sizes (< 768px). This causes browsers to synthesize bold text (faux-bold), which results in poor text rendering quality, especially when combined with uppercase text transformations.

The issue is particularly noticeable in the extension when displaying promotional headlines like "GET 3% ON STABLECOINS" at mobile viewport sizes.

Steps to Reproduce

1. Open the MetaMask design system Storybook or any project using the design system
2. Create a Text component with variant={TextVariant.DisplayMd} and fontFamily={FontFamily.Hero}
3. Add textTransform={TextTransform.Uppercase} to the text
4. Resize viewport to < 768px (mobile size)
5. Observe the text rendering quality - letters appear muddy and blurry

Example code:

<Text
  variant={TextVariant.DisplayMd}
  fontFamily={FontFamily.Hero}
  textTransform={TextTransform.Uppercase}
>
  GET 3% ON STABLECOINS
</Text>

Expected Behavior

The MMPoly font should have both weight 400 and weight 700 loaded, so that when the responsive CSS applies font-weight: 700 at small screens, the browser uses the actual bold font file instead of synthesizing it.

Alternatively, if only weight 400 is available for MMPoly, the DisplayMd variant should use font-weight: 500 (medium) at all screen sizes instead of 700 at small screens.

Current Behavior

Font Loading (from design-tokens/fonts.scss or equivalent):

• Only MMPoly-Regular.woff2 with font-weight: 400 is loaded
• There's a MMPoly-Variable.woff2 file available but not being used

Responsive Typography (from design-tokens CSS):

• Small screens (< 768px): font-size: 32px, font-weight: 700
• Large screens (≥ 768px): font-size: 48px, font-weight: 500

Result:
Browser creates faux-bold at small screens, causing degraded text rendering.

Screenshots

Comparison at 280px viewport width:

• Extension with uppercase + faux-bold: Text appears muddy with poor letter definition
• Design system without uppercase + faux-bold: Still uses faux-bold but looks better because lowercase has less dense letter forms

Environment

• Package: @metamask/design-system-tailwind-preset, @metamask/design-tokens
• Browser: Chrome (tested), affects all browsers
• Font files checked in: ui/css/utilities/fonts/MMPoly/
  • MM_Poly-Regular.woff2 ✓
  • MM_Poly-Variable.woff2 ✓ (not being used)

Root Cause

The design system's typography tokens define responsive font-weights for DisplayMd:

• --typography-s-display-md-font-weight: var(--font-weight-bold) (700)
• --typography-l-display-md-font-weight: var(--font-weight-medium) (500)

However, the font loading only includes weight 400 for MMPoly.

Proposed Solutions

Option 1 (Recommended): Use MMPoly Variable Font

• Update font loading to use MM_Poly-Variable.woff2 which supports the full weight range
• This maintains design intent while fixing rendering quality

Option 2: Adjust Typography Tokens

• Change DisplayMd to use font-weight: 500 at all screen sizes when using Hero font family
• This works with the currently loaded font but may require design approval

Option 3: Load Bold Weight

• Add MM_Poly-Bold.woff2 if available with font-weight: 700

Additional Context

This issue affects any component using the Hero font family with the DisplayMd variant, particularly in the MetaMask Extension's mUSD education screen. The poor rendering is most noticeable with:

• Uppercase text transforms
• Small viewport sizes (mobile)
• Dark backgrounds (where contrast issues are more apparent)

For reference, the other font families are correctly loaded:

• Geist: Has weights 400, 500, and 700 ✓
• MMSans: Uses variable font supporting weights 400-900 ✓
• MMPoly: Only has weight 400 ✗