Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove Roboto Font to Improve Performance and Consistency #26589

Closed
1 of 9 tasks
georgewrmarshall opened this issue Aug 21, 2024 · 1 comment · Fixed by #26552
Closed
1 of 9 tasks

Remove Roboto Font to Improve Performance and Consistency #26589

georgewrmarshall opened this issue Aug 21, 2024 · 1 comment · Fixed by #26552
Assignees
@davidmurdoch
Labels
release-12.5.0 Issue or pull request that will be included in release 12.5.0 release-12.6.0 Issue or pull request that will be included in release 12.6.0 team-design-system All issues relating to design system in Extension

Comments

@georgewrmarshall
Copy link
Contributor

georgewrmarshall commented Aug 21, 2024 •
edited
Loading

What is this about?

This task involves the removal of the Roboto font from the MetaMask extension. 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 extension 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.
  • Ensure that the removal does not affect any Material UI components or external packages.

Threat Modeling Framework

No response

Acceptance Criteria

  • Roboto should be completely removed from the MetaMask extension'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

  • 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
@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system in Extension label Aug 21, 2024
@georgewrmarshall georgewrmarshall mentioned this issue Aug 21, 2024
Merged
davidmurdoch added a commit that referenced this issue Sep 19, 2024
@davidmurdoch
perf: finish getting rid of uses of the Roboto font (#26552)
4f58f14 
We use two custom fonts in our typography CSS: Euclid Circular B and
Roboto.

Roboto is a fallback font, but since both are custom fonts Roboto will
never be activated by our default typography. It can be removed.

Roboto is only used in one other place in our CSS, but the selector
looks to be not used anymore.

Lastly, Material UI uses Roboto by default for input elements and their
labels. This PR updates our use of it to use "Euclid Circular B" and our
usual fall back fonts. I don't particularly like the implementation
(setting `fontFamily` as a string constant in JS), but I'm not sure how
to do it any better (cc @georgewrmarshall ).

It saves about 0-2ms from the load time (compared to
`popup-defer-scripts` branch), so it's not substantial by any stretch.
It does save 1.4 megabytes, about 6%, from the dist zip (compared to
`popup-defer-scripts` branch), which seems worthwhile.

Fixes: #26589
@metamaskbot metamaskbot added the release-12.6.0 Issue or pull request that will be included in release 12.6.0 label Sep 19, 2024
@metamaskbot metamaskbot added the release-12.5.0 Issue or pull request that will be included in release 12.5.0 label Sep 29, 2024
@metamaskbot
Copy link
Collaborator

Missing release label release-12.5.0 on issue. Adding release label release-12.5.0 on issue, as issue is linked to PR #26552 which has this release label.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@davidmurdoch davidmurdoch

Labels
release-12.5.0 Issue or pull request that will be included in release 12.5.0 release-12.6.0 Issue or pull request that will be included in release 12.6.0 team-design-system All issues relating to design system in Extension
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

perf: finish getting rid of uses of the Roboto font MetaMask/metamask-extension
3 participants
@davidmurdoch @georgewrmarshall @metamaskbot