feat: Implement expo-font for improved font rendering and maintainability

[georgewrmarshall]

Description

This PR implements expo-font to improve font rendering and maintainability of fonts in MetaMask Mobile. The change provides several benefits:
(from docs)

1. Fonts are available immediately when the app starts on a device.
2. No additional code required to load fonts in a project asynchronously when the app starts.
3. Fonts are consistently available across all devices where the app is installed because they're bundled within the app.

Key Changes

• Added expo-font plugin configuration in app.config.js with all app fonts
• Updated font family naming convention from space-separated (e.g., "Geist Regular") to hyphenated (e.g., "Geist-Regular") for better compatibility
• Updated snapshots to reflect font family name changes

⚠️ Work In Progress

This PR is still in development. Additional work needed:

• Review and update all independently defined font families in the codebase
• Consolidate font weight definitions
• Test font rendering on both iOS and Android
• Update any remaining legacy font references

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Font rendering with expo-font

  Scenario: user views app with new font system
    Given the app is running with expo-font enabled
    
    When user navigates through various screens
    Then all fonts should render correctly without flashing or loading delays
    And font weights and styles should be consistent across the app

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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.

---

Font References Audit

The following locations have independently defined font families that may need review:

Using old space-separated format (needs updating):

• app/components/Views/EnterPasswordSimple/index.js:37 - 'Geist Regular'
• app/components/Views/RevealPrivateCredential/styles.ts:82 - 'Geist Regular'
• app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts:63 - 'Geist Regular'

Using new hyphenated format (correct):

• app/styles/common.ts - 'Geist-Regular', 'Geist-Bold', 'Geist-Medium'
• app/components/Views/confirmations/components/deposit-keyboard/deposit-keyboard.styles.ts - 'Geist-Bold'
• app/components/Views/confirmations/components/send/amount/amount.styles.ts - 'Geist-Medium'
• app/components/UI/ReviewModal/styles.ts - 'Geist-Regular', 'Geist-Bold'
• app/components/UI/DeleteWalletModal/styles.ts - 'Geist-Medium'
• app/components/UI/Rewards/components/Onboarding/OnboardingIntroStep.tsx - 'MMPoly-Regular'

Platform-specific fonts:

• app/components/Views/confirmations/legacy/components/TypedSign/index.js - Device.isIos() ? 'Courier' : 'Roboto'

Font weights found across codebase:

Common numeric weights: 400, 500, 600, 700, 800
String weights: 'bold', 'normal'

🤖 Generated with Claude Code

[github-actions]

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.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​react-native-view-shot@​3.8.0 ⏵ 4.0.3	+1
	npm/​expo-build-properties@​0.13.2 ⏵ 0.13.3			+1	+1
	npm/​react-native-safe-area-context@​5.4.0 ⏵ 4.12.0	+1		+23
	npm/​@​react-native-async-storage/​async-storage@​1.23.1
	npm/​react-native-pager-view@​6.7.1 ⏵ 6.5.1	+1			-4
	npm/​lottie-react-native@​6.7.2 ⏵ 7.1.0	+1
	npm/​@​react-native-community/​slider@​4.5.6 ⏵ 4.5.5	+1			+1
	npm/​react-native-reanimated@​3.17.5 ⏵ 3.16.7	+1		+1
	npm/​react-native-svg@​15.11.2 ⏵ 15.8.0
	npm/​@​shopify/​flash-list@​2.0.3 ⏵ 1.7.3			-5
	npm/​react-native-gesture-handler@​2.25.0 ⏵ 2.20.2				+1
	npm/​@​react-native-community/​datetimepicker@​8.3.0 ⏵ 8.2.0	+1			-1
	npm/​@​sentry/​react-native@​6.15.1 ⏵ 6.10.0
	npm/​react-native-screens@​3.37.0 ⏵ 4.4.0

View full report

[codecov-commenter]

Codecov Report

❌ Patch coverage is 60.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 78.02%. Comparing base (e1acbc5) to head (1d0e10e).
⚠️ Report is 29 commits behind head on main.

Files with missing lines	Patch %	Lines
...ionBottomSheet/AssetSelectionBottomSheet.styles.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #22217      +/-   ##
==========================================
+ Coverage   77.91%   78.02%   +0.10%     
==========================================
  Files        3852     3865      +13     
  Lines       98566    98951     +385     
  Branches    19374    19466      +92     
==========================================
+ Hits        76801    77205     +404     
+ Misses      16501    16439      -62     
- Partials     5264     5307      +43     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sonarqubecloud]

Quality Gate failed

Failed conditions
77.8% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Network access: npm expo-build-properties in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: package.json → npm/[email protected] ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at [email protected]. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/[email protected]. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Block		Network access: npm recyclerlistview in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: package.json → npm/@shopify/[email protected] → npm/[email protected] ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at [email protected]. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/[email protected]. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeCore, SmokeWalletPlatform, SmokeWalletUX, SmokeConfirmationsRedesigned, SmokeAccounts, SmokeAssets
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

This PR migrates the font system from space-separated font names (e.g., "Geist Regular") to PostScript names with hyphens (e.g., "Geist-Regular") for proper expo-font integration.

Key changes include:

1. Font configuration in app.config.js with expo-font
2. New font constants file (app/constants/fonts.ts)
3. Updated fontStyles in app/styles/common.ts
4. Refactored components to use fontStyles object instead of direct fontWeight
5. 100 snapshot files updated reflecting the font name changes
6. Addition of Geist, MMSans, and MMPoly font families

Risk Assessment:

• This is a widespread UI change affecting text rendering across the entire application
• Font loading failures could result in missing text or incorrect fallback fonts
• The change is purely about font naming and weight mapping, not functional logic
• Snapshot updates indicate thorough visual regression testing was done

Selected test tags cover:

• SmokeCore: Core wallet functionality and app state to ensure basic operations work
• SmokeWalletPlatform: Core wallet and account management features
• SmokeWalletUX: Wallet UX and settings to verify UI rendering
• SmokeConfirmationsRedesigned: Confirmation flows which have complex UI
• SmokeAccounts: Account management and display
• SmokeAssets: Asset display and management which involves significant text rendering

Not selecting:

• Trade/Swaps/Bridge: While they have UI, the font change is uniform and core flows will catch issues
• Notifications/Rewards/Perps/Predictions: These are more specialized features less likely to be uniquely affected
• Identity/Network abstractions: These are more backend-focused
• Ramps/Card: More specialized features

Confidence at 85% because:

• The changes are well-defined and consistent (font naming convention)
• Extensive snapshot updates suggest thorough testing was done
• The risk is primarily visual/rendering, not functional
• Selected tags cover major user-facing flows and UI components

View GitHub Actions results

[georgewrmarshall]

Closing in favor of #23517 but keeping fontStyle updates for reference