fix: align font naming with PostScript convention for mobile compatibility #862

georgewrmarshall · 2025-12-04T02:47:46Z

Description

This PR updates font file naming and references across the design system monorepo to use PostScript naming conventions (hyphenated format) instead of space-separated names. This change aligns with the font naming convention implemented in MetaMask Mobile (see metamask-mobile#23517) and resolves iOS Metro bundler asset resolution issues.

What changed:

Font file naming convention: Updated from space-separated names (e.g., Geist Regular.otf) to hyphenated PostScript names (e.g., Geist-Regular.otf)
Font family references: Updated all font family keys in expo-font loading and Tailwind configurations to match the new naming
Consistency across platforms: Applied naming convention consistently to both React Native (.otf) and React Web (.woff2) font files

Why this change:

Mobile compatibility: Aligns with MetaMask Mobile's expo-font implementation which uses PostScript naming conventions
iOS bundler compatibility: Resolves Metro bundler issues with spaces in asset paths on iOS
Best practices: Follows expo-font documentation guidelines for proper font family identification
Cross-platform consistency: Ensures font references work consistently across React Native and Web platforms

Related issues

Related to: MetaMask/metamask-mobile#23517

Manual testing steps

Run yarn install
Run yarn storybook:ios to verify iOS bundler can resolve font assets
Verify fonts load correctly in the iOS simulator
Run yarn storybook:web to ensure web fonts still work correctly
Check that all text renders with the correct font families

Screenshots/Recordings

Before

This was likely an issue created in the semi bold PR there was an iOS Metro bundler errors with "Asset not found" for font files with spaces

After

Fonts load successfully without bundler errors

React Native Text(@metamask/design-system-react-native) renders as expected with all three fonts Geist, MM Poly and MM Sans

mmdsr.font.file.update.after.mov

React Text(@metamask/design-system-react) renders as expected with all three fonts Geist, MM Poly and MM Sans

mmdsr.font.file.after.mov

Design tokens(@metamask/design-tokens) renders as expected with all three fonts Geist, MM Poly and MM Sans

mmds.design.tokens.after.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

🤖 Generated with Claude Code

Note

Renames font files and family keys to PostScript-style hyphenated names and updates React Native loader, web @font-face sources, and typography config accordingly.

Fonts & Typography:
- React Native: Update apps/storybook-react-native/.storybook/FontLoader.js to load hyphenated PostScript font keys (e.g., Geist-Regular, MMSans-Bold, MMPoly-Regular).
- Web: Adjust apps/storybook-react/tailwind.css @font-face src paths to hyphenated filenames (e.g., Geist-Regular.woff2, MMSans-Regular.woff2, MMPoly-Regular.woff2).
- Design System (twrnc preset):
  - Update packages/design-system-twrnc-preset/src/typography.ts fontFamily mappings to new hyphenated names.
  - Revise example in packages/design-system-twrnc-preset/src/typography.types.ts to reflect Geist-Bold naming.

^{Written by Cursor Bugbot for commit c47bb52. This will update automatically on new commits. Configure here.}

github-actions · 2025-12-04T02:49:09Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-12-04T02:53:21Z

apps/storybook-react-native/.storybook/FontLoader.js

-        'Geist Regular': require('../fonts/Geist/Geist Regular.otf'),
-        'Geist Regular Italic': require('../fonts/Geist/Geist Regular Italic.otf'),
-        'Geist Medium': require('../fonts/Geist/Geist Medium.otf'),
-        'Geist Medium Italic': require('../fonts/Geist/Geist Medium Italic.otf'),
-        'Geist SemiBold': require('../fonts/Geist/Geist SemiBold.otf'),
-        'Geist SemiBold Italic': require('../fonts/Geist/Geist SemiBold Italic.otf'),
-        'MM Poly Regular': require('../fonts/MMPoly/MM Poly Regular.otf'),
-        'MM Sans Regular': require('../fonts/MMSans/MM Sans Regular.otf'),
-        'MM Sans Medium': require('../fonts/MMSans/MM Sans Medium.otf'),
-        'MM Sans Bold': require('../fonts/MMSans/MM Sans Bold.otf'),
+        'Geist-Regular': require('../fonts/Geist/Geist-Regular.otf'),
+        'Geist-RegularItalic': require('../fonts/Geist/Geist-RegularItalic.otf'),
+        'Geist-Medium': require('../fonts/Geist/Geist-Medium.otf'),
+        'Geist-MediumItalic': require('../fonts/Geist/Geist-MediumItalic.otf'),
+        'Geist-SemiBold': require('../fonts/Geist/Geist-SemiBold.otf'),
+        'Geist-SemiBoldItalic': require('../fonts/Geist/Geist-SemiBoldItalic.otf'),
+        'Geist-Bold': require('../fonts/Geist/Geist-Bold.otf'),
+        'Geist-BoldItalic': require('../fonts/Geist/Geist-BoldItalic.otf'),
+        'MMPoly-Regular': require('../fonts/MMPoly/MMPoly-Regular.otf'),
+        'MMSans-Regular': require('../fonts/MMSans/MMSans-Regular.otf'),
+        'MMSans-Medium': require('../fonts/MMSans/MMSans-Medium.otf'),
+        'MMSans-Bold': require('../fonts/MMSans/MMSans-Bold.otf'),


Updating FontLoader in storybook-react-native which in the monorepo case would be the equivalent of mobile.
Also, searching for "Geist " and "MM " (with a space) returns no results outside of docs and comments, donfirming no instances were missed.

georgewrmarshall · 2025-12-04T03:00:55Z

apps/storybook-react-native/fonts/Geist/Geist-Bold.otf

Matches PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:01:22Z

apps/storybook-react-native/fonts/Geist/Geist-BoldItalic.otf

Matches PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:03:05Z

apps/storybook-react-native/fonts/Geist/Geist-Medium.otf

Matches PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:03:23Z

apps/storybook-react-native/fonts/Geist/Geist-MediumItalic.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:03:39Z

apps/storybook-react-native/fonts/Geist/Geist-Regular.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:03:57Z

apps/storybook-react-native/fonts/Geist/Geist-RegularItalic.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:06:10Z

apps/storybook-react-native/fonts/Geist/Geist-SemiBold.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:06:33Z

apps/storybook-react-native/fonts/Geist/Geist-SemiBoldItalic.otf

Matches PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:07:16Z

apps/storybook-react-native/fonts/MMSans/MMSans-Bold.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:07:24Z

apps/storybook-react-native/fonts/MMPoly/MMPoly-Regular.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:07:39Z

apps/storybook-react-native/fonts/MMSans/MMSans-Medium.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:07:51Z

apps/storybook-react-native/fonts/MMSans/MMSans-Regular.otf

PostScript name in Font Book

georgewrmarshall · 2025-12-04T03:09:08Z

apps/storybook-react/fonts/Geist/Geist-Bold.woff2

Updating storybook react fonts to be consistent and prevent confusion between platforms

georgewrmarshall · 2025-12-04T03:09:13Z

apps/storybook-react/fonts/Geist/Geist-BoldItalic.woff2

Updating storybook react fonts to be consistent and prevent confusion between platforms

georgewrmarshall · 2025-12-04T03:09:31Z

apps/storybook-react/tailwind.css


 /* Geist */
 @font-face {
  font-family: 'Geist';


Updating tailwind stylesheet

packages/design-system-twrnc-preset/src/typography.ts

packages/design-system-twrnc-preset/src/typography.types.ts

github-actions · 2025-12-04T03:41:35Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-12-04T03:52:23Z

@metamaskbot publish-preview

Copilot

Pull request overview

This PR standardizes font file naming and references across the design system monorepo to use PostScript-style hyphenated naming conventions (e.g., Geist-Regular.otf) instead of space-separated names (e.g., Geist Regular.otf). This change resolves iOS Metro bundler asset resolution issues with spaces in file paths and aligns with MetaMask Mobile's font implementation.

Key Changes:

Updated font file references from space-separated to hyphenated PostScript naming conventions
Applied naming consistently across React Native (.otf) and React Web (.woff2) font files
Updated font family mappings in typography configuration to match new naming

Reviewed changes

Copilot reviewed 4 out of 28 changed files in this pull request and generated no comments.

File	Description
`packages/design-system-twrnc-preset/src/typography.ts`	Updated font family mappings to use hyphenated PostScript names (e.g., `Geist-Regular`, `MMSans-Bold`)
`packages/design-system-twrnc-preset/src/typography.types.ts`	Updated documentation example to use `Geist-SemiBold` instead of `Geist Bold`
`apps/storybook-react/tailwind.css`	Updated all `@font-face` declarations to reference hyphenated `.woff2` font files
`apps/storybook-react-native/.storybook/FontLoader.js`	Updated `expo-font` loading to use hyphenated font keys and file paths for all `.otf` files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

georgewrmarshall · 2025-12-04T17:04:54Z

@metamaskbot publish-preview

github-actions · 2025-12-04T17:05:17Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-12-04T17:06:36Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.5.0-preview.08c551e",
  "@metamask-previews/design-system-react-native": "0.4.1-preview.08c551e",
  "@metamask-previews/design-system-shared": "0.1.1-preview.08c551e",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.08c551e",
  "@metamask-previews/design-system-twrnc-preset": "0.2.1-preview.08c551e",
  "@metamask-previews/design-tokens": "8.1.1-preview.08c551e"
}

ript names

github-actions · 2025-12-04T20:41:48Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-12-04T20:41:52Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-12-04T20:42:12Z

@metamaskbot publish-preview

github-actions · 2025-12-04T20:43:58Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.5.0-preview.c47bb52",
  "@metamask-previews/design-system-react-native": "0.4.1-preview.c47bb52",
  "@metamask-previews/design-system-shared": "0.1.1-preview.c47bb52",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.c47bb52",
  "@metamask-previews/design-system-twrnc-preset": "0.2.1-preview.c47bb52",
  "@metamask-previews/design-tokens": "8.1.1-preview.c47bb52"
}

## **Description** This PR releases version 17.0.0 of the MetaMask Design System, featuring important fixes for mobile font compatibility, the addition of the ButtonHero component to React, export fixes for React Native, and various dependency updates including ESLint configuration upgrades. ## **Included PRs** #836, #837, #838, #840, #843, #845, #846, #847, #848, #850, #851, #852, #853, #854, #855, #856, #857, #858, #859, #861, #862, #863, #864 ## **Manual testing steps** 1. Check package.json version bumps align with included changes 2. Check changelog accurately reflects the release ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > Release 17.0.0 introducing React `ButtonHero`, RN font naming changes and TWRNC preset font family rename (both breaking), plus RN export fix and dependency updates. > > - **Release 17.0.0** > - Bump root `package.json` to `17.0.0`. > - **React (`@metamask/[email protected]`)** > - Add `ButtonHero` component for prominent CTAs. > - Update `@metamask/utils` peer to `^11.8.1`. > - **React Native (`@metamask/[email protected]`)** > - BREAKING: Rename font files to hyphenated PostScript format for iOS Metro compatibility. > - Export missing `TextButtonSize` enum. > - Peer: require `@metamask/design-system-twrnc-preset@^0.3.0`; update `@metamask/utils` peer. > - **TWRNC preset (`@metamask/[email protected]`)** > - BREAKING: Rename font family names to hyphenated PostScript format for iOS/expo-font. > - **Changelogs** > - Update `CHANGELOG.md` links and entries for all packages. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 9a90311. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall requested a review from a team as a code owner December 4, 2025 02:47