fix: force font-normal for Hero font family to prevent browser synthesis#932
Draft
georgewrmarshall wants to merge 1 commit intomainfrom
Draft
fix: force font-normal for Hero font family to prevent browser synthesis#932georgewrmarshall wants to merge 1 commit intomainfrom
georgewrmarshall wants to merge 1 commit intomainfrom
Conversation
Contributor
📖 Storybook Preview |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
packages/design-system-react-native/src/components/Text/Text.tsx
Outdated
Show resolved
Hide resolved
Implements a consistent, constants-based architecture for font family weight constraints to prevent browser font synthesis when unavailable weights are requested. **Problem:** MMPoly Hero font only has regular weight (400) available, but design system was applying bold (700) for Display variants, causing browsers to synthesize bold text and producing muddy/blurry rendering on mobile and uppercase content. **Solution - Constants-Based Architecture:** 1. **Single Source of Truth**: Created `FONT_FAMILY_AVAILABLE_WEIGHTS` constant mapping which documents available weights per font family 2. **Weight Override Constants**: - React Web: `CLASSMAP_FONTFAMILY_WEIGHT_OVERRIDE` maps to Tailwind classes - React Native: `FONTFAMILY_WEIGHT_OVERRIDE` maps to FontWeight enum values 3. **Consistent Implementation**: Both platforms now use the same architectural pattern: - Define constraints in Text.constants.ts - Apply constraints in Text.tsx component logic - Override takes precedence: fontFamily override → fontWeight prop → variant default 4. **Clean Enum**: Removed `font-normal` from `FontFamily.Hero` enum value, keeping enum semantically clean (family only, not weight) 5. **Tailwind CSS Cleanup**: Removed duplicate `@font-face` declarations for MMPoly weights 500/700 since only weight 400 exists **Files Changed:** - packages/design-system-react/src/types/index.ts - packages/design-system-react/src/components/Text/Text.constants.ts - packages/design-system-react/src/components/Text/Text.tsx - packages/design-system-react-native/src/components/Text/Text.constants.ts - packages/design-system-react-native/src/components/Text/Text.tsx - apps/storybook-react/tailwind.css **Benefits:** - ✅ Consistent cross-platform architecture - ✅ Self-documenting (shows which weights exist per family) - ✅ Scalable (easy to add new constrained font families) - ✅ Type-safe with clear separation of concerns 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
georgewrmarshall
force-pushed
the
fix/mmpoly-hero-font-weight
branch
from
6725f81 to
7dba65c
Compare
Contributor
📖 Storybook Preview |
| } | ||
|
|
||
| /* MM Poly */ | ||
| /* MM Poly - Only regular weight is available */ |
Contributor
There was a problem hiding this comment.
Removed MMPoly weights may re-enable synthesis
Medium Severity
Removing the @font-face entries for MMPoly weights 500 and 700 can reintroduce synthetic bold/medium rendering anywhere that uses font-family: MMPoly with non-400 font-weight outside the Text component override, potentially bringing back the blurriness this PR is addressing in Storybook (or any other direct CSS usage).
| ], | ||
| [FontFamily.Accent]: [FontWeight.Regular, FontWeight.Medium, FontWeight.Bold], | ||
| [FontFamily.Hero]: [FontWeight.Regular], // Only regular weight available for MMPoly | ||
| }; |
Contributor
There was a problem hiding this comment.
Unused exported available-weight constants
Low Severity
The new exported constant FONT_FAMILY_AVAILABLE_WEIGHTS is not referenced anywhere, which adds dead API surface and increases the chance future code incorrectly relies on it being enforced, even though the actual enforcement is done via CLASSMAP_FONTFAMILY_WEIGHT_OVERRIDE/FONTFAMILY_WEIGHT_OVERRIDE.
Additional Locations (1)
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 implements a refined, constants-based architecture for font family weight constraints to fix the MMPoly Hero font rendering issue.
Problem: The MMPoly Hero font only has a regular weight (400) font file available, but the design system was applying font-weight 700 (bold) for Display variants on small screens. This forced browsers to artificially synthesize bold text, resulting in muddy/blurry rendering—especially noticeable on mobile displays and with uppercase content.
Solution - Constants-Based Architecture:
1. Single Source of Truth
Created
FONT_FAMILY_AVAILABLE_WEIGHTSconstant that documents which font weights are actually available for each font family.2. Weight Override Constants
CLASSMAP_FONTFAMILY_WEIGHT_OVERRIDEmaps to Tailwind classesFONTFAMILY_WEIGHT_OVERRIDEmaps to FontWeight enum values3. Consistent Component Logic
Both platforms apply weight constraints with the same pattern in Text.constants.ts → Text.tsx
4. Additional Improvements
font-normalfromFontFamily.Heroenum (clean separation of concerns)@font-facedeclarations for MMPoly in Tailwind CSSBenefits
✅ Consistent cross-platform architecture
✅ Self-documenting (shows which weights exist)
✅ Scalable (easy to add constrained families)
✅ Type-safe with clear separation of concerns
Related issues
Fixes: #928
Manual testing steps
yarn storybook(web) oryarn storybook:ios/android(native)Pre-merge author checklist
Pre-merge reviewer checklist