MetaMask / MetaMask/metamask-mobile

Remove Roboto Font to Improve Performance and Consistency

Open
#10,731 0 comments 0 reactions 0 assignees View on GitHub
area-performance team-design-system
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### What is this about?

This task involves the removal of the Roboto font from MetaMask mobile. Currently, Roboto is being used as a fallback font, but it is mostly unnecessary since Euclid Circular B is the primary font. The investigation has revealed that Roboto is only utilized in a few select instances and could likely be removed entirely to streamline the font loading process and improve performance.

### Scenario

_No response_

### Design

_No response_

### Technical Details

- Audit the mobile to confirm all instances of Roboto usage.
- Replace Roboto with Euclid Circular B where necessary.
- If Euclid is unavailable, configure the font stack to fall back to system fonts rather than another custom font.

### Threat Modeling Framework

_No response_

### Acceptance Criteria

- Roboto should be completely removed from the MetaMask mobiles's CSS and other relevant files.
- The font stack should fall back to system fonts when Euclid Circular B is unavailable.
- Verify that the removal does not negatively impact the UI/UX.
- Test to confirm no regression or issues arise from this change.

### Stakeholder review needed before the work gets merged

- [X] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

- [Slack thread](https://consensys.slack.com/archives/CTQAGKY5V/p1724173426966159)

Contributor guide

Open the contributing guide

Research direction

Start by auditing MetaMask mobile's CSS and other relevant files for every Roboto reference, then identify the few usages described in the issue. Replace those usages with Euclid Circular B or system-font fallbacks, and verify that Roboto is absent and no UI regressions appear in testing.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile, performance
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.