fix: font rendering issues by updating font preloader to preload all custom font files by brianacnguyen · Pull Request #21199 · MetaMask/metamask-mobile

brianacnguyen · 2025-10-15T13:38:56Z

Description

This PR improves font rendering consistency across the entire app by enhancing the FontPreloader implementation to prevent font-related rendering issues.

What is the reason for the change?
The existing FontPreloader used a variant-based approach that maintained a manual list of TextVariant enums to preload. This approach was prone to:

Missing newly added TextVariants, causing font loading race conditions
Inconsistent font rendering with FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text)
Maintenance overhead to keep variant lists synchronized with actual usage
Potential layout shifts when fonts load asynchronously

What is the improvement/solution?
Refactored the FontPreloader to load all available font files directly instead of maintaining a variant-based list. The new approach:

Preloads all 6 Geist font variations (Regular, Medium, Bold + Italic versions)
Preloads all 4 MM font variations (MM Poly Regular, MM Sans Regular/Medium/Bold)
Eliminates the need to maintain TextVariant lists that could become outdated
Provides comprehensive font coverage that automatically supports any TextVariant
Future-proofs the system against font rendering issues

Changelog

CHANGELOG entry: Improved font rendering consistency by preloading all available font files

Related issues

Fixes: #15115 #19485 #20001

Manual testing steps

Feature: Comprehensive font preloading

  Scenario: user views components with various text variants
    Given the user navigates through different app screens
    And components use different TextVariant types (DisplayLG, BodyMDBold, BodySMBold, etc.)
    
    When the user views any text content
    Then all text should render immediately with correct fonts
    And there should be no font flashing or layout shifts
    
  Scenario: user experiences consistent font rendering across platforms
    Given the FontPreloader has loaded all font files
    And the user is on web or native platform
    
    When the user interacts with any UI components containing text
    Then font rendering should be consistent and immediate
    And no fallback fonts should be visible during loading

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.

Note

Refactors FontPreloader to preload all Geist/MM fonts across web/native, standardizes text input typography (adds fontFamily, sets lineHeight, removes fontWeight), and updates tests/snapshots accordingly.

Core:
- FontPreloader: Refactor to preload all custom font families (Geist Regular/Medium/Bold + Italics; MM Poly/Sans Regular/Medium/Bold) via FontFace on web and timed warm-up on native; add extractFontProperties; improve logging and error handling; return consistent loading promise.
- Tests: Rewrite with platform/timeouts/DOM mocks; add coverage for concurrency, platform-specific delays, web API success/fallback paths, and error handling.
UI/Typography:
- Inputs: Standardize typography by adding fontFamily: 'Geist Regular' in Views/EnterPasswordSimple, Views/RevealPrivateCredential, MultichainAccounts/PrivateKeyList; enforce lineHeight and remove fontWeight from input styles.
- Snapshots: Update across components to reflect removed fontWeight and added lineHeight/fontFamily.

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

github-actions · 2025-10-15T13:39:05Z

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.

georgewrmarshall · 2025-10-17T18:33:04Z

app/core/FontPreloader/FontPreloader.ts

+        document.fonts.load('italic 400 16px "Geist Regular Italic"'),
+        document.fonts.load('italic 500 16px "Geist Medium Italic"'),
+        document.fonts.load('italic 700 16px "Geist Bold Italic"'),
+        document.fonts.load('400 16px "MM Poly Regular"'),
+        document.fonts.load('400 16px "MM Sans Regular"'),
+        document.fonts.load('500 16px "MM Sans Medium"'),
+        document.fonts.load('700 16px "MM Sans Bold"'),


Should we store these strings in a const?

davibroc

I tested the fix and it's looking good now

georgewrmarshall

Nice work! Do we have a planned follow-up to make these changes more maintainable? Defining fontFamily: 'Geist Regular' for each input that isn't working doesn't seem very scalable. Is there a way to set this globally, or should we replace these inputs with design system versions instead? What are your thoughts?

Copilot

Pull Request Overview

This PR refactors the FontPreloader to comprehensively preload all custom font files rather than maintaining a manual list of TextVariant enums, improving font rendering consistency and preventing FOIT/FOUT issues across the app.

Replaces variant-based font preloading with direct font family preloading for all Geist and MM font variations
Adds explicit font family declarations to input fields for consistent rendering
Cleans up Input component styles by removing redundant fontWeight and fixing lineHeight formatting

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
app/core/FontPreloader/FontPreloader.ts	Refactored to preload all 10 custom font families directly instead of using TextVariant mappings
app/components/Views/RevealPrivateCredential/styles.ts	Added explicit Geist Regular font family to input styles
app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts	Added explicit Geist Regular font family to input styles
app/components/Views/EnterPasswordSimple/index.js	Added explicit Geist Regular font family to input styles
app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts	Fixed lineHeight formatting and removed redundant fontWeight property

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-17T20:09:19Z

app/core/FontPreloader/FontPreloader.ts

+      span.style.fontFamily = fontFamily;
+      span.textContent = 'Font preload test';
+      preloadContainer.appendChild(span);
    });


The web font preloading logic creates DOM elements but doesn't set fontWeight, which may not fully exercise all font variations. Consider adding fontWeight extraction from the fontFamily name (e.g., 'Medium' -> '500', 'Bold' -> '700') to ensure proper font loading.

app/core/FontPreloader/FontPreloader.ts

Copilot

Pull Request Overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated no new comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

davibroc

LGTM

georgewrmarshall · 2025-10-24T16:10:50Z

app/core/FontPreloader/__tests__/FontPreloader.test.ts

@@ -1,12 +1,155 @@
 import FontPreloader from '../FontPreloader';
+import { Platform } from 'react-native';


Improving testing coverage after SonarCloud test failures

Before

After

Copilot

Pull Request Overview

Copilot reviewed 32 out of 32 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

app/core/FontPreloader/tests/FontPreloader.test.ts:1

This pattern of adding promisify to mock setTimeout is duplicated across multiple helper functions (lines 27, 50, 305, 373, 404, 427). Consider extracting this into a shared utility function within the test utilities to reduce duplication.

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

Copilot · 2025-10-24T16:40:55Z

app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts

        paddingVertical: Platform.OS === 'ios' ? 2 : 1,
-        // Ensure consistent line height for custom font baseline alignment        lineHeight: Platform.OS === 'ios' ? 20 : 22,
+        // Ensure consistent line height for custom font baseline alignment
+        lineHeight: Platform.OS === 'ios' ? 20 : 22,
        fontFamily: getFontFamily(textVariant),


The lineHeight values (20 for iOS, 22 for Android) should be documented or extracted as named constants to clarify why different platforms require different values for custom font baseline alignment.

sonarqubecloud · 2025-10-24T17:02:44Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

gantunesr

Approved for Accounts CO

brianacnguyen self-assigned this Oct 15, 2025

brianacnguyen added needs-qa Any New Features that needs a full manual QA prior to being added to a release. team-design-system All issues relating to design system in Mobile labels Oct 15, 2025

github-actions bot added the size-S label Oct 15, 2025

This comment was marked as outdated.

Sign in to view

brianacnguyen changed the title ~~chore: updated font preloader to preload all custom font files~~ chore: updated font preloader to preload all custom font files cp-7.57.0 Oct 15, 2025

brianacnguyen added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Oct 15, 2025

Cal-L changed the title ~~chore: updated font preloader to preload all custom font files cp-7.57.0~~ chore: updated font preloader to preload all custom font files Oct 17, 2025

brianacnguyen requested a review from a team as a code owner October 17, 2025 17:40

This comment was marked as outdated.

Sign in to view

georgewrmarshall reviewed Oct 17, 2025

View reviewed changes

brianacnguyen requested a review from a team as a code owner October 17, 2025 18:40

davibroc previously approved these changes Oct 17, 2025

View reviewed changes

davibroc added the QA Passed QA testing has been completed and passed label Oct 17, 2025

georgewrmarshall previously approved these changes Oct 17, 2025

View reviewed changes

georgewrmarshall requested a review from Copilot October 17, 2025 20:08

Copilot AI reviewed Oct 17, 2025

View reviewed changes

georgewrmarshall dismissed stale reviews from davibroc and themself via 5bf2017 October 23, 2025 20:25

georgewrmarshall added No E2E Smoke Needed and removed needs-qa Any New Features that needs a full manual QA prior to being added to a release. labels Oct 23, 2025

georgewrmarshall requested a review from davibroc October 23, 2025 20:30

georgewrmarshall force-pushed the fix/missing-font-preloader-variants branch from 5bf2017 to 2987622 Compare October 23, 2025 21:10

github-actions bot added size-M and removed size-S labels Oct 23, 2025

georgewrmarshall requested review from Copilot and georgewrmarshall October 23, 2025 21:12

Copilot AI reviewed Oct 23, 2025

View reviewed changes

georgewrmarshall enabled auto-merge October 23, 2025 21:17

brianacnguyen and others added 5 commits October 23, 2025 15:10

Added font families to missing input

78cd119

chore: updating snapshot for fiat selector modal

3503fbd

chore: updating more snapshots

83eb567

Update app/core/FontPreloader/FontPreloader.ts

8b21e24

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

chore: another snapshot update after rebase from main

89cb3b5

georgewrmarshall previously approved these changes Oct 23, 2025

View reviewed changes

davibroc previously approved these changes Oct 24, 2025

View reviewed changes

chore: refactoring tests for dry violations

c8c1280

georgewrmarshall dismissed stale reviews from davibroc and themself via c8c1280 October 24, 2025 16:06

georgewrmarshall force-pushed the fix/missing-font-preloader-variants branch from b9cbdc8 to c8c1280 Compare October 24, 2025 16:06

github-actions bot added size-L and removed size-M labels Oct 24, 2025

georgewrmarshall reviewed Oct 24, 2025

View reviewed changes

chore: lint fixes

1652c65

georgewrmarshall requested review from Copilot and davibroc October 24, 2025 16:40

Copilot AI reviewed Oct 24, 2025

View reviewed changes

georgewrmarshall changed the title ~~chore: updated font preloader to preload all custom font files~~ fix: updated font preloader to preload all custom font files Oct 24, 2025

georgewrmarshall changed the title ~~fix: updated font preloader to preload all custom font files~~ fix: font rendering issues by updating font preloader to preload all custom font files Oct 24, 2025

georgewrmarshall approved these changes Oct 24, 2025

View reviewed changes

georgewrmarshall removed the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Oct 24, 2025

gantunesr approved these changes Oct 24, 2025

View reviewed changes

georgewrmarshall added this pull request to the merge queue Oct 24, 2025

Merged via the queue into main with commit 74b8745 Oct 24, 2025
212 of 216 checks passed

georgewrmarshall deleted the fix/missing-font-preloader-variants branch October 24, 2025 19:42

github-actions bot locked and limited conversation to collaborators Oct 24, 2025

metamaskbot added the release-7.59.0 Issue or pull request that will be included in release 7.59.0 label Oct 24, 2025

		@@ -1,12 +1,155 @@
		import FontPreloader from '../FontPreloader';
		import { Platform } from 'react-native';

Uh oh!

Conversation

brianacnguyen commented Oct 15, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Oct 15, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

georgewrmarshall Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

davibroc left a comment

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

davibroc left a comment

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Oct 24, 2025

Quality Gate passed

Uh oh!

gantunesr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

brianacnguyen commented Oct 15, 2025 •

edited by cursor bot

Loading

georgewrmarshall Oct 24, 2025 •

edited

Loading