Repository: callstack/react-native-paper
Pull request #786 (2019-01-30 09:54:03)

feat: configure fonts more granuar
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

This PR allows to configure fonts more granular (i.e. currently, it let's you specify `fontWeight` but it can be extended). As mentioned by @satya164 in https://github.com/callstack/react-native-paper/issues/590 this will most likely land in 3.0.

### Test plan

See examples app.


callstack-bot: Hey @jaulz, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://7477-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.
jaulz: By the way, does it make sense to include `letter-spacing` as well in Typography? See https://material.io/design/typography/the-type-system.html#type-scale and https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ which both specify such.
satya164: @jaulz yea why not
RichardLindhout: Excited for this feature ;)
jaulz: I just had a look at the letter spacing but since the spacing depends on the font and the size it makes it difficult to configure. The only way I could think of at the moment would be to define a letter spacing map in the theme, e.g.:
```
  ios: {
    regular: {
      fontFamily: 'System',
      fontWeight: '400',
      letterSpacing: {
        // See https://github.com/hectahertz/react-native-typography/blob/master/src/helpers/sanFranciscoSpacing.js
        6: 0.246,
        7: 0.223,
        8: 0.208,
        9: 0.171,
        10: 0.12,
        11: 0.06,
        12: 0,
      },
    },
  },
```

@satya164 what do you think?
satya164: My idea was that for fonts was that we'd be able to do `style={fonts.regular}`. I think if there is a letter spacing map inside, it'll get more complicated. The solution I can think of is that our `Text` component (or another component) accepts a prop to customize the letter spacing and adjusts it automatically based on font size. But I think let's leave it for now, we can come back to it later.
jaulz: Yep, that's what I thought as well. Though, in the future we could think about a `letterSpacing` function that takes the `fontFamily` and the `fontSize` as input parameters and calculates the letter spacing for predefined fonts - maybe even via the theme. Let's park it for now...
geminiyellow: good job, that is really what i want. 
i need to set a big font for old men.
Trancever: Hey @jaulz, Could you change target branch to 3.0?  
jaulz: @Trancever done 😊 unfortunately, I don't have time to check for the conflicts right now.
Trancever: @jaulz No worries, take your time. Maybe someone from callstack will fix it in the meantime.
jaulz: @Trancever done

Patch:
diff --git a/src/components/Appbar/AppbarContent.js b/src/components/Appbar/AppbarContent.js
index 50aefe687..cfcba2789 100644
--- a/src/components/Appbar/AppbarContent.js
+++ b/src/components/Appbar/AppbarContent.js
@@ -84,8 +84,7 @@ class AppbarContent extends React.Component<Props> {
             style={[
               {
                 color: titleColor,
-                fontFamily:
-                  Platform.OS === 'ios' ? fonts.regular : fonts.medium,
+                ...(Platform.OS === 'ios' ? fonts.regular : fonts.medium),
               },
               styles.title,
               titleStyle,
diff --git a/src/components/Badge.js b/src/components/Badge.js
index 38d687921..9d4456712 100644
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -89,7 +89,7 @@ class Badge extends React.Component<Props, State> {
             backgroundColor,
             color: textColor,
             fontSize: size * 0.5,
-            fontFamily: theme.fonts.regular,
+            ...theme.fonts.regular,
             lineHeight: size,
             height: size,
             minWidth: size,
diff --git a/src/components/Button.js b/src/components/Button.js
index 477707e13..c09d77fd5 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -156,7 +156,7 @@ class Button extends React.Component<Props, State> {
       ...rest
     } = this.props;
     const { colors, roundness } = theme;
-    const fontFamily = theme.fonts.medium;
+    const font = theme.fonts.medium;
 
     let backgroundColor, borderColor, textColor, borderWidth;
 
@@ -221,7 +221,7 @@ class Button extends React.Component<Props, State> {
       borderRadius: roundness,
     };
     const touchableStyle = { borderRadius: roundness };
-    const textStyle = { color: textColor, fontFamily };
+    const textStyle = { color: textColor, ...font };
     const elevation = disabled ? 0 : this.state.elevation;
 
     return (
@@ -269,7 +269,7 @@ class Button extends React.Component<Props, State> {
                 styles.label,
                 compact && styles.compactLabel,
                 textStyle,
-                { fontFamily },
+                font,
               ]}
             >
               {React.Children.map(
diff --git a/src/components/Drawer/DrawerItem.js b/src/components/Drawer/DrawerItem.js
index 8a0b610c4..4e5b2bed7 100644
--- a/src/components/Drawer/DrawerItem.js
+++ b/src/components/Drawer/DrawerItem.js
@@ -68,7 +68,7 @@ class DrawerItem extends React.Component<Props> {
           .alpha(0.68)
           .rgb()
           .string();
-    const fontFamily = theme.fonts.medium;
+    const font = theme.fonts.medium;
     const labelMargin = icon ? 32 : 0;
 
     return (
@@ -100,7 +100,7 @@ class DrawerItem extends React.Component<Props> {
                 styles.label,
                 {
                   color: contentColor,
-                  fontFamily,
+                  ...font,
                   marginLeft: labelMargin,
                 },
               ]}
diff --git a/src/components/Drawer/DrawerSection.js b/src/components/Drawer/DrawerSection.js
index 66428878c..baf9ef307 100644
--- a/src/components/Drawer/DrawerSection.js
+++ b/src/components/Drawer/DrawerSection.js
@@ -67,7 +67,7 @@ class DrawerSection extends React.Component<Props> {
       .alpha(0.54)
       .rgb()
       .string();
-    const fontFamily = fonts.medium;
+    const font = fonts.medium;
 
     return (
       <View {...rest}>
@@ -75,7 +75,7 @@ class DrawerSection extends React.Component<Props> {
           <View style={{ height: 40, justifyContent: 'center' }}>
             <Text
               numberOfLines={1}
-              style={{ color: titleColor, fontFamily, marginLeft: 16 }}
+              style={{ color: titleColor, ...font, marginLeft: 16 }}
             >
               {title}
             </Text>
diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index ee105a520..f9c27d7f8 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -213,7 +213,7 @@ class FAB extends React.Component<Props, State> {
               <Text
                 style={[
                   styles.label,
-                  { color: foregroundColor, fontFamily: theme.fonts.medium },
+                  { color: foregroundColor, ...theme.fonts.medium },
                 ]}
               >
                 {label.toUpperCase()}
diff --git a/src/components/List/ListSubheader.js b/src/components/List/ListSubheader.js
index 73194f56b..20fc1e558 100644
--- a/src/components/List/ListSubheader.js
+++ b/src/components/List/ListSubheader.js
@@ -39,7 +39,7 @@ class ListSubheader extends React.Component<Props> {
   render() {
     const { style, theme, ...rest } = this.props;
     const { colors, fonts } = theme;
-    const fontFamily = fonts.medium;
+    const font = fonts.medium;
     const textColor = color(colors.text)
       .alpha(0.54)
       .rgb()
@@ -49,7 +49,7 @@ class ListSubheader extends React.Component<Props> {
       <Text
         numberOfLines={1}
         {...rest}
-        style={[styles.container, { color: textColor, fontFamily }, style]}
+        style={[styles.container, { color: textColor, ...font }, style]}
       />
     );
   }
diff --git a/src/components/Searchbar.js b/src/components/Searchbar.js
index 15fa01e3d..76c4da1ec 100644
--- a/src/components/Searchbar.js
+++ b/src/components/Searchbar.js
@@ -137,15 +137,13 @@ class Searchbar extends React.Component<Props> {
     } = this.props;
     const { colors, roundness, dark, fonts } = theme;
     const textColor = colors.text;
-    const fontFamily = fonts.regular;
-    const iconColor =
-      customIconColor ||
-      (dark
-        ? textColor
-        : color(textColor)
-            .alpha(0.54)
-            .rgb()
-            .string());
+    const font = fonts.regular;
+    const iconColor = dark
+      ? textColor
+      : color(textColor)
+          .alpha(0.54)
+          .rgb()
+          .string();
     const rippleColor = color(textColor)
       .alpha(0.32)
       .rgb()
@@ -167,7 +165,7 @@ class Searchbar extends React.Component<Props> {
           icon={icon || 'search'}
         />
         <TextInput
-          style={[styles.input, { color: textColor, fontFamily }, inputStyle]}
+          style={[styles.input, { color: textColor, ...font }, inputStyle]}
           placeholder={placeholder || ''}
           placeholderTextColor={colors.placeholder}
           selectionColor={colors.primary}
diff --git a/src/components/Typography/StyledText.js b/src/components/Typography/StyledText.js
index 4185af201..8e21fb399 100644
--- a/src/components/Typography/StyledText.js
+++ b/src/components/Typography/StyledText.js
@@ -21,14 +21,14 @@ class StyledText extends React.Component<Props> {
       .alpha(alpha)
       .rgb()
       .string();
-    const fontFamily = theme.fonts[family];
+    const font = theme.fonts[family];
     const writingDirection = I18nManager.isRTL ? 'rtl' : 'ltr';
 
     return (
       <Text
         {...rest}
         style={[
-          { color: textColor, fontFamily, textAlign: 'left', writingDirection },
+          { color: textColor, ...font, textAlign: 'left', writingDirection },
           style,
           this.props.style,
         ]}
diff --git a/src/components/Typography/Text.js b/src/components/Typography/Text.js
index 4163387d4..648c76d6f 100644
--- a/src/components/Typography/Text.js
+++ b/src/components/Typography/Text.js
@@ -40,7 +40,7 @@ class Text extends React.Component<Props> {
         }}
         style={[
           {
-            fontFamily: theme.fonts.regular,
+            ...theme.fonts.regular,
             color: theme.colors.text,
             textAlign: 'left',
             writingDirection,
diff --git a/src/styles/fonts.js b/src/styles/fonts.js
index b94518cbd..fa58c5bc8 100644
--- a/src/styles/fonts.js
+++ b/src/styles/fonts.js
@@ -2,24 +2,54 @@ import { Platform } from 'react-native';
 
 const fonts = Platform.select({
   web: {
-    regular: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-    medium:
-      'Roboto-Medium, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-    light:
-      'Roboto-Light, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
-    thin: 'Roboto-Thin, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    regular: {
+      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      fontWeight: '500',
+    },
+    light: {
+      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      fontWeight: '300',
+    },
+    thin: {
+      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+      fontWeight: '100',
+    },
   },
   ios: {
-    regular: 'Helvetica Neue',
-    medium: 'HelveticaNeue-Medium',
-    light: 'HelveticaNeue-Light',
-    thin: 'HelveticaNeue-Thin',
+    regular: {
+      fontFamily: 'System',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'System',
+      fontWeight: '500',
+    },
+    light: {
+      fontFamily: 'System',
+      fontWeight: '300',
+    },
+    thin: {
+      fontFamily: 'System',
+      fontWeight: '100',
+    },
   },
   default: {
-    regular: 'sans-serif',
-    medium: 'sans-serif-medium',
-    light: 'sans-serif-light',
-    thin: 'sans-serif-thin',
+    regular: {
+      fontFamily: 'sans-serif',
+    },
+    medium: {
+      fontFamily: 'sans-serif-medium',
+    },
+    light: {
+      fontFamily: 'sans-serif-light',
+    },
+    thin: {
+      fontFamily: 'sans-serif-thin',
+    },
   },
 });
 
diff --git a/src/types.js b/src/types.js
index 508069368..7ba95206c 100644
--- a/src/types.js
+++ b/src/types.js
@@ -2,6 +2,22 @@
 
 import * as React from 'react';
 
+export type Font = {
+  fontFamily: string,
+  fontWeight?:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900',
+};
+
 export type Theme = {
   dark: boolean,
   roundness: number,
@@ -18,10 +34,10 @@ export type Theme = {
     notification: string,
   },
   fonts: {
-    regular: string,
-    medium: string,
-    light: string,
-    thin: string,
+    regular: Font,
+    medium: Font,
+    light: Font,
+    thin: Font,
   },
   animation: {
     scale: number,
diff --git a/typings/types.d.ts b/typings/types.d.ts
index d9e93790c..ce0aaee79 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -1,52 +1,57 @@
-import * as React from 'react';
-import { ThemingType } from '@callstack/react-theme-provider';
-import { ImageSourcePropType } from 'react-native';
-
-type IconSourceBase = string | ImageSourcePropType;
-
-interface PartialIconProps {
-  color: string;
-  size: number;
-}
-
-export type IconSource =
-  | IconSourceBase
-  | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
-  | ((props: PartialIconProps) => React.ReactNode);
-
-type DeepPartial<T> = { [P in keyof T]?: DeepPartial<T[P]> };
-
-export type Theme = {
-  dark: boolean;
-  roundness: number;
-  colors: {
-    primary: string;
-    background: string;
-    surface: string;
-    accent: string;
-    error: string;
-    text: string;
-    disabled: string;
-    placeholder: string;
-    backdrop: string;
-  };
-  fonts: {
-    regular: string;
-    medium: string;
-    light: string;
-    thin: string;
-  };
-};
-
-type Theming = ThemingType<Theme, ThemeShape>;
-
-export type ThemeShape = DeepPartial<Theme>;
-export declare const withTheme: Theming['withTheme'];
-export declare const DefaultTheme: Theme;
-export declare const DarkTheme: Theme;
-export declare const ThemeProvider: Theming['ThemeProvider'];
-
-export declare class Provider extends React.Component<{
-  children: React.ReactNode;
-  theme?: ThemeShape;
-}> {}
+import * as React from 'react';
+import { ThemingType } from '@callstack/react-theme-provider';
+import { ImageSourcePropType } from 'react-native';
+
+type IconSourceBase = string | ImageSourcePropType;
+
+interface PartialIconProps {
+  color: string;
+  size: number;
+}
+
+export type IconSource =
+  | IconSourceBase
+  | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
+  | ((props: PartialIconProps) => React.ReactNode);
+
+type DeepPartial<T> = { [P in keyof T]?: DeepPartial<T[P]> };
+
+export type Font = {
+  fontFamily: string,
+  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900',
+};
+
+export type Theme = {
+  dark: boolean;
+  roundness: number;
+  colors: {
+    primary: string;
+    background: string;
+    surface: string;
+    accent: string;
+    error: string;
+    text: string;
+    disabled: string;
+    placeholder: string;
+    backdrop: string;
+  };
+  fonts: {
+    regular: Font;
+    medium: Font;
+    light: Font;
+    thin: Font;
+  };
+};
+
+type Theming = ThemingType<Theme, ThemeShape>;
+
+export type ThemeShape = DeepPartial<Theme>;
+export declare const withTheme: Theming['withTheme'];
+export declare const DefaultTheme: Theme;
+export declare const DarkTheme: Theme;
+export declare const ThemeProvider: Theming['ThemeProvider'];
+
+export declare class Provider extends React.Component<{
+  children: React.ReactNode;
+  theme?: ThemeShape;
+}> {}


Test patch:
diff --git a/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap b/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap
index d45bd3ab9..07ad367c1 100644
--- a/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap
+++ b/src/components/__tests__/Typography/__snapshots__/Caption.test.js.snap
@@ -6,14 +6,16 @@ exports[`renders caption applying style 1`] = `
     Array [
       Object {
         "color": "#000000",
-        "fontFamily": "Helvetica Neue",
+        "fontFamily": "System",
+        "fontWeight": "400",
         "textAlign": "left",
         "writingDirection": "ltr",
       },
       Array [
         Object {
           "color": "rgba(0, 0, 0, 0.54)",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -53,14 +55,16 @@ exports[`renders caption with children as content 1`] = `
     Array [
       Object {
         "color": "#000000",
-        "fontFamily": "Helvetica Neue",
+        "fontFamily": "System",
+        "fontWeight": "400",
         "textAlign": "left",
         "writingDirection": "ltr",
       },
       Array [
         Object {
           "color": "rgba(0, 0, 0, 0.54)",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
diff --git a/src/components/__tests__/__snapshots__/Avatar.test.js.snap b/src/components/__tests__/__snapshots__/Avatar.test.js.snap
index e9d8dc16d..c7be241b6 100644
--- a/src/components/__tests__/__snapshots__/Avatar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Avatar.test.js.snap
@@ -165,7 +165,8 @@ exports[`renders avatar with text 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -212,7 +213,8 @@ exports[`renders avatar with text and custom background color 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -259,7 +261,8 @@ exports[`renders avatar with text and custom colors 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -306,7 +309,8 @@ exports[`renders avatar with text and custom size 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
diff --git a/src/components/__tests__/__snapshots__/Badge.test.js.snap b/src/components/__tests__/__snapshots__/Badge.test.js.snap
index 44b46ce66..2b979395e 100644
--- a/src/components/__tests__/__snapshots__/Badge.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Badge.test.js.snap
@@ -9,8 +9,9 @@ exports[`renders badge 1`] = `
       "backgroundColor": "#f50057",
       "borderRadius": 10,
       "color": "#ffffff",
-      "fontFamily": "Helvetica Neue",
+      "fontFamily": "System",
       "fontSize": 10,
+      "fontWeight": "400",
       "height": 20,
       "lineHeight": 20,
       "minWidth": 20,
@@ -33,8 +34,9 @@ exports[`renders badge as hidden 1`] = `
       "backgroundColor": "#f50057",
       "borderRadius": 6,
       "color": "#ffffff",
-      "fontFamily": "Helvetica Neue",
+      "fontFamily": "System",
       "fontSize": 6,
+      "fontWeight": "400",
       "height": 12,
       "lineHeight": 12,
       "minWidth": 12,
@@ -59,8 +61,9 @@ exports[`renders badge in different color 1`] = `
       "backgroundColor": "#f44336",
       "borderRadius": 10,
       "color": "#ffffff",
-      "fontFamily": "Helvetica Neue",
+      "fontFamily": "System",
       "fontSize": 10,
+      "fontWeight": "400",
       "height": 20,
       "lineHeight": 20,
       "minWidth": 20,
@@ -85,8 +88,9 @@ exports[`renders badge in different size 1`] = `
       "backgroundColor": "#f50057",
       "borderRadius": 6,
       "color": "#ffffff",
-      "fontFamily": "Helvetica Neue",
+      "fontFamily": "System",
       "fontSize": 6,
+      "fontWeight": "400",
       "height": 12,
       "lineHeight": 12,
       "minWidth": 12,
@@ -111,8 +115,9 @@ exports[`renders badge with content 1`] = `
       "backgroundColor": "#f50057",
       "borderRadius": 10,
       "color": "#ffffff",
-      "fontFamily": "Helvetica Neue",
+      "fontFamily": "System",
       "fontSize": 10,
+      "fontWeight": "400",
       "height": 20,
       "lineHeight": 20,
       "minWidth": 20,
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index c6feedffb..c8d6cb306 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -269,8 +269,9 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -454,8 +455,9 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -639,8 +641,9 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -959,8 +962,9 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -1144,8 +1148,9 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -1329,8 +1334,9 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -1571,8 +1577,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -1736,8 +1743,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -1901,8 +1909,9 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -2201,8 +2210,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -2350,8 +2360,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -2499,8 +2510,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -2648,8 +2660,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -2797,8 +2810,9 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -3119,8 +3133,9 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -3164,7 +3179,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -3197,7 +3213,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -3376,8 +3393,9 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -3421,7 +3439,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -3454,7 +3473,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -3633,8 +3653,9 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -3678,7 +3699,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -3711,7 +3733,8 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -4025,8 +4048,9 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -4070,7 +4094,8 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -4249,8 +4274,9 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -4294,7 +4320,8 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -4473,8 +4500,9 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -4518,7 +4546,8 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -4812,8 +4841,9 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -4857,7 +4887,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -4890,7 +4921,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5069,8 +5101,9 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -5114,7 +5147,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5147,7 +5181,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5326,8 +5361,9 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -5371,7 +5407,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5404,7 +5441,8 @@ exports[`renders non-shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5718,8 +5756,9 @@ exports[`renders shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -5763,7 +5802,8 @@ exports[`renders shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -5942,8 +5982,9 @@ exports[`renders shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -5987,7 +6028,8 @@ exports[`renders shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -6166,8 +6208,9 @@ exports[`renders shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -6211,7 +6254,8 @@ exports[`renders shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -6390,8 +6434,9 @@ exports[`renders shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -6435,7 +6480,8 @@ exports[`renders shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
@@ -6614,8 +6660,9 @@ exports[`renders shifting bottom navigation 1`] = `
                       "backgroundColor": "#f50057",
                       "borderRadius": 8,
                       "color": "#ffffff",
-                      "fontFamily": "Helvetica Neue",
+                      "fontFamily": "System",
                       "fontSize": 8,
+                      "fontWeight": "400",
                       "height": 16,
                       "lineHeight": 16,
                       "minWidth": 16,
@@ -6659,7 +6706,8 @@ exports[`renders shifting bottom navigation 1`] = `
                     Array [
                       Object {
                         "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
+                        "fontFamily": "System",
+                        "fontWeight": "400",
                         "textAlign": "left",
                         "writingDirection": "ltr",
                       },
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 0f99c199f..f1346751e 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -60,7 +60,8 @@ exports[`renders button with color 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -74,10 +75,12 @@ exports[`renders button with color 1`] = `
               undefined,
               Object {
                 "color": "#e91e63",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -194,7 +197,8 @@ exports[`renders button with icon 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -208,10 +212,12 @@ exports[`renders button with icon 1`] = `
               undefined,
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -284,7 +290,8 @@ exports[`renders contained contained with mode 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -298,10 +305,12 @@ exports[`renders contained contained with mode 1`] = `
               undefined,
               Object {
                 "color": "#ffffff",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -372,7 +381,8 @@ exports[`renders disabled button 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -386,10 +396,12 @@ exports[`renders disabled button 1`] = `
               undefined,
               Object {
                 "color": "rgba(0, 0, 0, 0.32)",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -475,7 +487,8 @@ exports[`renders loading button 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -489,10 +502,12 @@ exports[`renders loading button 1`] = `
               undefined,
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -565,7 +580,8 @@ exports[`renders outlined button with mode 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -579,10 +595,12 @@ exports[`renders outlined button with mode 1`] = `
               undefined,
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -655,7 +673,8 @@ exports[`renders text button by default 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -669,10 +688,12 @@ exports[`renders text button by default 1`] = `
               undefined,
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
@@ -745,7 +766,8 @@ exports[`renders text button with mode 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -759,10 +781,12 @@ exports[`renders text button with mode 1`] = `
               undefined,
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
               Object {
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index 95511f8cd..689bbbbcb 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -95,7 +95,8 @@ exports[`renders chip with close button 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -268,7 +269,8 @@ exports[`renders chip with icon 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -345,7 +347,8 @@ exports[`renders chip with onPress 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -426,7 +429,8 @@ exports[`renders outlined disabled chip 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -552,7 +556,8 @@ exports[`renders selected chip 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index 8244955e7..f48ced2bb 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -31,7 +31,8 @@ exports[`renders data table cell 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -88,7 +89,8 @@ exports[`renders data table header 1`] = `
         Array [
           Object {
             "color": "#000000",
-            "fontFamily": "Helvetica Neue",
+            "fontFamily": "System",
+            "fontWeight": "400",
             "textAlign": "left",
             "writingDirection": "ltr",
           },
@@ -137,7 +139,8 @@ exports[`renders data table header 1`] = `
         Array [
           Object {
             "color": "#000000",
-            "fontFamily": "Helvetica Neue",
+            "fontFamily": "System",
+            "fontWeight": "400",
             "textAlign": "left",
             "writingDirection": "ltr",
           },
@@ -182,7 +185,8 @@ exports[`renders data table pagination 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -377,7 +381,8 @@ exports[`renders data table pagination with label 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -630,7 +635,8 @@ exports[`renders data table title with press handler 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -730,7 +736,8 @@ exports[`renders data table title with sort icon 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -787,7 +794,8 @@ exports[`renders right aligned data table cell 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -830,7 +838,8 @@ exports[`renders right aligned data table title 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
index bd453794a..f0e2d8fda 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
@@ -86,7 +86,8 @@ exports[`renders DrawerItem with icon 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -96,7 +97,8 @@ exports[`renders DrawerItem with icon 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.68)",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
                 "marginLeft": 32,
               },
             ],
@@ -201,7 +203,8 @@ exports[`renders active DrawerItem 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -211,7 +214,8 @@ exports[`renders active DrawerItem 1`] = `
               },
               Object {
                 "color": "#6200ee",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
                 "marginLeft": 32,
               },
             ],
@@ -277,7 +281,8 @@ exports[`renders basic DrawerItem 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -287,7 +292,8 @@ exports[`renders basic DrawerItem 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, 0.68)",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
                 "marginLeft": 0,
               },
             ],
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index 4c7bdbb4a..32ca3b331 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -134,7 +134,8 @@ exports[`renders extended FAB 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -144,7 +145,8 @@ exports[`renders extended FAB 1`] = `
               },
               Object {
                 "color": "rgba(0, 0, 0, .54)",
-                "fontFamily": "HelveticaNeue-Medium",
+                "fontFamily": "System",
+                "fontWeight": "500",
               },
             ],
           ]
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index 762c1b7bf..72a14ed88 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -52,7 +52,8 @@ exports[`renders expanded accordion 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -165,7 +166,8 @@ exports[`renders expanded accordion 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -291,7 +293,8 @@ exports[`renders list accordion with children 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -461,7 +464,8 @@ exports[`renders list accordion with left items 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -581,7 +585,8 @@ exports[`renders multiline list accordion 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -604,7 +609,8 @@ exports[`renders multiline list accordion 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index f1c52d538..ecd5cdf1e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -152,7 +152,8 @@ exports[`renders list item with left and right items 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -176,7 +177,8 @@ exports[`renders list item with left and right items 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -348,7 +350,8 @@ exports[`renders list item with left item 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -420,7 +423,8 @@ exports[`renders list item with right item 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -495,7 +499,8 @@ exports[`renders list item with title and description 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
@@ -519,7 +524,8 @@ exports[`renders list item with title and description 1`] = `
           Array [
             Object {
               "color": "#000000",
-              "fontFamily": "Helvetica Neue",
+              "fontFamily": "System",
+              "fontWeight": "400",
               "textAlign": "left",
               "writingDirection": "ltr",
             },
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index 56774d0c6..653d84fd4 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -44,7 +44,8 @@ exports[`renders list section with subheader 1`] = `
       Array [
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
           "textAlign": "left",
           "writingDirection": "ltr",
         },
@@ -55,7 +56,8 @@ exports[`renders list section with subheader 1`] = `
           },
           Object {
             "color": "rgba(0, 0, 0, 0.54)",
-            "fontFamily": "HelveticaNeue-Medium",
+            "fontFamily": "System",
+            "fontWeight": "500",
           },
           undefined,
         ],
@@ -162,7 +164,8 @@ exports[`renders list section with subheader 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -281,7 +284,8 @@ exports[`renders list section with subheader 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -441,7 +445,8 @@ exports[`renders list section without subheader 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
@@ -560,7 +565,8 @@ exports[`renders list section without subheader 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontFamily": "Helvetica Neue",
+                "fontFamily": "System",
+                "fontWeight": "400",
                 "textAlign": "left",
                 "writingDirection": "ltr",
               },
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index 6fd256197..e870a592a 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -118,7 +118,8 @@ exports[`renders with placeholder 1`] = `
         },
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         undefined,
       ]
@@ -331,7 +332,8 @@ exports[`renders with text 1`] = `
         },
         Object {
           "color": "#000000",
-          "fontFamily": "Helvetica Neue",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         undefined,
       ]
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 08ceece21..c64f15257 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -46,7 +46,8 @@ exports[`renders snackbar with Text as a child 1`] = `
         Array [
           Object {
             "color": "#000000",
-            "fontFamily": "Helvetica Neue",
+            "fontFamily": "System",
+            "fontWeight": "400",
             "textAlign": "left",
             "writingDirection": "ltr",
           },
@@ -117,7 +118,8 @@ exports[`renders snackbar with action button 1`] = `
         Array [
           Object {
             "color": "#000000",
-            "fontFamily": "Helvetica Neue",
+            "fontFamily": "System",
+            "fontWeight": "400",
             "textAlign": "left",
             "writingDirection": "ltr",
           },
@@ -199,7 +201,8 @@ exports[`renders snackbar with action button 1`] = `
               Array [
                 Object {
                   "color": "#000000",
-                  "fontFamily": "Helvetica Neue",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                   "textAlign": "left",
                   "writingDirection": "ltr",
                 },
@@ -215,10 +218,12 @@ exports[`renders snackbar with action button 1`] = `
                   },
                   Object {
                     "color": "#03dac4",
-                    "fontFamily": "HelveticaNeue-Medium",
+                    "fontFamily": "System",
+                    "fontWeight": "500",
                   },
                   Object {
-                    "fontFamily": "HelveticaNeue-Medium",
+                    "fontFamily": "System",
+                    "fontWeight": "500",
                   },
                 ],
               ]
@@ -277,7 +282,8 @@ exports[`renders snackbar with content 1`] = `
         Array [
           Object {
             "color": "#000000",
-            "fontFamily": "Helvetica Neue",
+            "fontFamily": "System",
+            "fontWeight": "400",
             "textAlign": "left",
             "writingDirection": "ltr",
           },