chore: initial commit to add expo-font

app.config.js

@@ -28,14 +28,30 @@ module.exports = {
         subdomains: '*',
       },
     ],
-
     'expo-apple-authentication',
     [
       'expo-screen-orientation',
       {
         initialOrientation: 'PORTRAIT',
       },
     ],
+    [
+      'expo-font',
+      {
+        fonts: [
+          './assets/fonts/Geist-Regular.otf',
+          './assets/fonts/Geist-Medium.otf',
+          './assets/fonts/Geist-Bold.otf',
+          './assets/fonts/Geist-Regular-Italic.otf',
+          './assets/fonts/Geist-Medium-Italic.otf',
+          './assets/fonts/Geist-Bold-Italic.otf',
+          './assets/fonts/MMSans-Regular.otf',
+          './assets/fonts/MMSans-Medium.otf',
+          './assets/fonts/MMSans-Bold.otf',
+          './assets/fonts/MMPoly-Regular.otf',
+        ],
+      },
+    ],
   ],
   android: {
     package:

app/component-library/components/Texts/Text/Text.utils.ts

@@ -1,5 +1,6 @@
 import { typography } from '@metamask/design-tokens';
 import { FontWeight, FontStyle, TextVariant } from './Text.types';
+import { FONT_FAMILIES, GEIST_WEIGHT_MAPPING } from '../../../constants/fonts';
 
 export const getFontFamily = (
   variant: TextVariant,
@@ -9,23 +10,9 @@ export const getFontFamily = (
   const resolvedWeight = fontWeight ?? typography[variant].fontWeight;
   const resolvedStyle = fontStyle ?? 'normal';
 
-  const weightToFontSuffix: Record<FontWeight, 'Regular' | 'Medium' | 'Bold'> =
-    {
-      '100': 'Regular',
-      '200': 'Regular',
-      '300': 'Regular',
-      '400': 'Regular',
-      '500': 'Medium',
-      '600': 'Medium',
-      '700': 'Bold',
-      '800': 'Bold',
-      '900': 'Bold',
-      normal: 'Regular',
-      bold: 'Bold',
-    };
+  const fontSuffix = GEIST_WEIGHT_MAPPING[resolvedWeight as keyof typeof GEIST_WEIGHT_MAPPING];
+  const italicSuffix = resolvedStyle === 'italic' ? '-Italic' : '';
 
-  const fontSuffix = weightToFontSuffix[resolvedWeight as FontWeight];
-  const italicSuffix = resolvedStyle === 'italic' ? ' Italic' : '';
-
-  return `Geist ${fontSuffix}${italicSuffix}`;
+  // Return PostScript name format (with hyphens)
+  return `Geist-${fontSuffix}${italicSuffix}`;
 };

app/components/UI/DeleteWalletModal/styles.ts

@@ -80,7 +80,7 @@ export const createStyles = (colors: any) =>
     warningText: {
       textAlign: 'left',
       width: '100%',
-      fontFamily: 'Geist Medium',
+      fontFamily: 'Geist-Medium',
     },
     warningTextContainer: {
       flexDirection: 'column',

app/components/UI/ReviewModal/styles.ts

@@ -20,7 +20,7 @@ export const createStyles = (colors: any) =>
     optionIcon: { fontSize: 24 },
     optionLabel: {
       fontSize: 14,
-      fontFamily: 'Geist Regular',
+      fontFamily: 'Geist-Regular',
       color: colors.primary.default,
     },
     helpOption: { marginVertical: 12 },
@@ -29,14 +29,14 @@ export const createStyles = (colors: any) =>
     questionLabel: {
       fontSize: 18,
       paddingHorizontal: 30,
-      fontFamily: 'Geist Bold',
+      fontFamily: 'Geist-Bold',
       textAlign: 'center',
       color: colors.text.default,
       lineHeight: 26,
     },
     description: {
       fontSize: 14,
-      fontFamily: 'Geist Regular',
+      fontFamily: 'Geist-Regular',
       color: colors.text.alternative,
       textAlign: 'center',
       lineHeight: 20,

app/components/UI/Rewards/components/Onboarding/OnboardingIntroStep.tsx

@@ -318,7 +318,7 @@ const OnboardingIntroStep: React.FC<{
             tw.style('text-center text-white text-12 leading-1 pt-1'),
             // eslint-disable-next-line react-native/no-inline-styles
             {
-              fontFamily: Platform.OS === 'ios' ? 'MM Poly' : 'MM Poly Regular',
+              fontFamily: 'MMPoly-Regular',
             },
           ]}
         >

app/components/Views/confirmations/components/deposit-keyboard/deposit-keyboard.styles.ts

@@ -9,11 +9,9 @@ const styleSheet = (_params: { theme: Theme }) =>
       flexGrow: 1,
       marginBottom: 12,
     },
-
     disabledButton: {
       opacity: 0.5,
     },
-
     skeletonButton: {
       width: '100%',
       height: 48,

app/components/Views/confirmations/components/send/amount/amount.styles.ts

@@ -64,7 +64,7 @@ export const styleSheet = (params: {
     inputText: {
       fontSize: getFontSizeForInputLength(contentLength),
       lineHeight: 75,
-      fontFamily: 'Geist Medium',
+      fontFamily: 'Geist-Medium',
     },
     inputWrapper: {
       alignItems: 'center',

app/constants/fonts.ts

@@ -0,0 +1,63 @@
+/**
+ * Font constants for MetaMask Mobile
+ *
+ * This file maps old Full Names (with spaces) to new PostScript Names (with hyphens)
+ * for proper font loading with expo-font.
+ */
+
+// PostScript Names (correct format for React Native)
+export const FONT_FAMILIES = {
+  GEIST_REGULAR: 'Geist-Regular',
+  GEIST_MEDIUM: 'Geist-Medium',
+  GEIST_BOLD: 'Geist-Bold',
+  GEIST_REGULAR_ITALIC: 'Geist-Regular-Italic',
+  GEIST_MEDIUM_ITALIC: 'Geist-Medium-Italic',
+  GEIST_BOLD_ITALIC: 'Geist-Bold-Italic',
+  MMSANS_REGULAR: 'MMSans-Regular',
+  MMSANS_MEDIUM: 'MMSans-Medium',
+  MMSANS_BOLD: 'MMSans-Bold',
+  MMPOLY_REGULAR: 'MMPoly-Regular',
+} as const;
+
+// Mapping from old Full Names to new PostScript Names
+export const FONT_NAME_MAPPING = {
+  // Geist fonts
+  'Geist Regular': FONT_FAMILIES.GEIST_REGULAR,
+  'Geist Medium': FONT_FAMILIES.GEIST_MEDIUM,
+  'Geist Bold': FONT_FAMILIES.GEIST_BOLD,
+  'Geist Regular Italic': FONT_FAMILIES.GEIST_REGULAR_ITALIC,
+  'Geist Medium Italic': FONT_FAMILIES.GEIST_MEDIUM_ITALIC,
+  'Geist Bold Italic': FONT_FAMILIES.GEIST_BOLD_ITALIC,
+
+  // MM Sans fonts
+  'MM Sans Regular': FONT_FAMILIES.MMSANS_REGULAR,
+  'MM Sans Medium': FONT_FAMILIES.MMSANS_MEDIUM,
+  'MM Sans Bold': FONT_FAMILIES.MMSANS_BOLD,
+
+  // MM Poly fonts
+  'MM Poly Regular': FONT_FAMILIES.MMPOLY_REGULAR,
+} as const;
+
+// Helper function to get correct PostScript name
+export const getPostScriptFontName = (fullName: string): string => {
+  return FONT_NAME_MAPPING[fullName as keyof typeof FONT_NAME_MAPPING] || fullName;
+};
+
+// Weight to font family mapping for Geist fonts
+export const GEIST_WEIGHT_MAPPING = {
+  '100': 'Regular',
+  '200': 'Regular',
+  '300': 'Regular',
+  '400': 'Regular',
+  '500': 'Medium',
+  '600': 'Medium',
+  '700': 'Bold',
+  '800': 'Bold',
+  '900': 'Bold',
+  normal: 'Regular',
+  bold: 'Bold',
+} as const;
+
+export type FontWeight = keyof typeof GEIST_WEIGHT_MAPPING;
+export type FontStyle = 'normal' | 'italic';
+export type GeistFontSuffix = typeof GEIST_WEIGHT_MAPPING[FontWeight];