diff --git a/example/storybook/stories/components/primitives/Text/ChangingFont.tsx b/example/storybook/stories/components/primitives/Text/ChangingFont.tsx
new file mode 100644
index 000000000..76da25836
--- /dev/null
+++ b/example/storybook/stories/components/primitives/Text/ChangingFont.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text } from 'native-base';
+
+export const Example = () => {
+  return (
+    <Text fontFamily="heading" italic>
+      This is Text.
+    </Text>
+  );
+};
diff --git a/example/storybook/stories/components/primitives/Text/index.tsx b/example/storybook/stories/components/primitives/Text/index.tsx
index 27d9f98d2..3e0e7305d 100644
--- a/example/storybook/stories/components/primitives/Text/index.tsx
+++ b/example/storybook/stories/components/primitives/Text/index.tsx
@@ -7,12 +7,36 @@ import { Example as ChangingFontSize } from './ChangingFontSize';
 import { Example as Overriden } from './Overriden';
 import { Example as Truncated } from './Truncated';
 import { Example as Nested } from './Nested';
+import { Example as ChangingFont } from './ChangingFont';
+import { extendTheme } from '../../../../../../src/core';
+
+const theme = extendTheme({
+  fontConfig: {
+    heading: {
+      400: {
+        normal: 'heading-Regular',
+        italic: 'heading-Italic',
+      },
+      500: {
+        normal: 'heading-Medium',
+        italic: 'heading-MediumItalic',
+      },
+      700: {
+        normal: 'heading-Bold',
+        italic: 'heading-BoldItalic',
+      },
+    },
+  },
+});
 
 storiesOf('Text', module)
   .addDecorator(withKnobs)
-  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .addDecorator((getStory: any) => (
+    <Wrapper theme={theme}>{getStory()}</Wrapper>
+  ))
   .add('Basic', () => <Basic />)
   .add('Changing Font Size', () => <ChangingFontSize />)
   .add('Truncated', () => <Truncated />)
   .add('Overriden', () => <Overriden />)
-  .add('Nested', () => <Nested />);
+  .add('Nested', () => <Nested />)
+  .add('Changing Font', () => <ChangingFont />);
diff --git a/src/hooks/useResolvedFontFamily.web.ts b/src/hooks/useResolvedFontFamily.web.ts
new file mode 100644
index 000000000..7ab9cbed5
--- /dev/null
+++ b/src/hooks/useResolvedFontFamily.web.ts
@@ -0,0 +1,18 @@
+import type { ITheme } from '../theme';
+/**
+ *
+ * @param props
+ * @returns resolved fontFamily
+ * @description Combination of fontWeight, fontStyle and font family is fully supported on web but on Android we need to pass the exact font family.
+ * for e.g. If we load Roboto-Light-Italic.ttf using css, we can use fontFamily: Roboto, fontWeight: 300, fontStyle: italic on web, but same may not work on all the platforms. Other platform needs to set fontFamily: Roboto-Light-Italic in order to work.
+ * So this function's purpose is to intake styles like fontFamily: Roboto, fontWeight: 300, fontStyle: Italic and return fontFamily: Roboto-Light-Italic depending upon the fontConfig token in typography theme.
+ * This function depends upon fontConfig token in typography for mapping.
+ */
+export function useResolvedFontFamily(props: {
+  fontFamily?: keyof ITheme['fonts'];
+  fontStyle?: string;
+  fontWeight?: keyof ITheme['fontWeights'];
+}) {
+  const { fontFamily, fontStyle, fontWeight } = props;
+  return { fontFamily, fontStyle, fontWeight };
+}