diff --git a/app/client/.storybook/config.js b/app/client/.storybook/config.js
index a73e36cda6..5fea975677 100644
--- a/app/client/.storybook/config.js
+++ b/app/client/.storybook/config.js
@@ -2,6 +2,8 @@ import { configure, addDecorator, addParameters } from "@storybook/react";
 import { withContexts } from "@storybook/addon-contexts/react";
 import { contexts } from "./configs/contexts";
 import { } from '@storybook/react'; // <- or your storybook framework
+import "../src/index.css";
+
 
 addDecorator(withContexts(contexts));
 addParameters({
diff --git a/app/client/package.json b/app/client/package.json
index 4ea39be357..e17e64f269 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -19,7 +19,6 @@
     "@sentry/browser": "^5.6.3",
     "@sentry/webpack-plugin": "^1.10.0",
     "@types/chance": "^1.0.7",
-    "@types/fontfaceobserver": "^0.0.6",
     "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
     "@types/nanoid": "^2.0.0",
@@ -52,7 +51,6 @@
     "eslint": "^6.4.0",
     "fast-deep-equal": "^3.1.1",
     "flow-bin": "^0.91.0",
-    "fontfaceobserver": "^2.1.0",
     "fuse.js": "^3.4.5",
     "fusioncharts": "^3.15.0-sr.1",
     "history": "^4.10.1",
@@ -200,4 +198,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/client/public/index.html b/app/client/public/index.html
index 5c9057683b..8086d8ef28 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />
   <title>Appsmith</title>
   <style>
     #loader {
@@ -20,15 +19,15 @@
     // INTERCOM SETUP
     const APP_ID = "%REACT_APP_INTERCOM_APP_ID%"
     const CLOUD_HOSTING = "%REACT_APP_CLOUD_HOSTING%"
-    if(APP_ID.length && CLOUD_HOSTING.length) {
-      (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
+    if (APP_ID.length && CLOUD_HOSTING.length) {
+      (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { var d = document; var i = function () { i.c(arguments); }; i.q = []; i.c = function (args) { i.q.push(args); }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/' + APP_ID; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (document.readyState === 'complete') { l(); } else if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();
     }
   </script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"></script>
   <script>
     // GA SETUP
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());
 
     gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%");
@@ -62,7 +61,7 @@
   </script>
   <script type="text/javascript">
     const parseConfig = (config) => {
-      if(config.indexOf("__") === 0 || config.indexOf("$") === 0)
+      if (config.indexOf("__") === 0 || config.indexOf("$") === 0)
         return "";
       return config.trim();
     }
@@ -98,11 +97,11 @@
         id: parseConfig("__APPSMITH_VERSION_ID__"),
         releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__")
       },
-      intercomAppID:  parseConfig("__APPSMITH_INTERCOM_APP_ID__"),
+      intercomAppID: parseConfig("__APPSMITH_INTERCOM_APP_ID__"),
     };
   </script>
   <script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.4.0/tinymce.min.js" referrerpolicy="origin"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
index 6816609157..21a969a2cc 100644
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@@ -248,7 +248,6 @@ const StyledButton = styled("button")<ThemeProp & ButtonProps>`
   color: ${props => btnColorStyles(props, "main").txtColor};
   border: ${props => btnColorStyles(props, "main").border};
   border-radius: ${props => props.theme.radii[0]};
-  font-family: ${props => props.theme.fonts[2]};
   ${props => btnFontStyles(props).buttonFont};
   padding: ${props => btnFontStyles(props).padding};
   .ads-icon {
diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index 87c6128ffa..81f7bdedec 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -24,7 +24,6 @@ const Styles = styled.div`
           font-size: ${props => props.theme.typography.h6.fontSize}px;
           line-height: ${props => props.theme.typography.h6.lineHeight}px;
           letter-spacing: ${props => props.theme.typography.h6.letterSpacing}px;
-          font-family: ${props => props.theme.fonts[2]};
 
           svg {
             margin-left: ${props => props.theme.spaces[2]}px;
@@ -59,7 +58,6 @@ const Styles = styled.div`
           line-height: ${props => props.theme.typography.p1.lineHeight}px;
           letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
           font-weight: normal;
-          font-family: ${props => props.theme.fonts[2]};
           border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
         }
 
diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index c627fd5105..cad85e0622 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -6,7 +6,6 @@ import { Icon, IconName } from "./Icon";
 import { Size } from "./Button";
 
 const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
-  font-family: ${props => props.theme.fonts[2]};
   user-select: none;
   border-radius: 0px;
   height: 100%;
diff --git a/app/client/src/components/ads/Text.tsx b/app/client/src/components/ads/Text.tsx
index d1eda51125..f7b75c2abd 100644
--- a/app/client/src/components/ads/Text.tsx
+++ b/app/client/src/components/ads/Text.tsx
@@ -41,7 +41,6 @@ const typeSelector = (props: TextProps & ThemeProp): string => {
 const Text = styled.span<TextProps>`
   text-decoration: ${props => (props.underline ? "underline" : "unset")};
   font-style: ${props => (props.italic ? "italic" : "normal")};
-  font-family: ${props => props.theme.fonts[2]};
   font-weight: ${props => props.theme.typography[props.type].fontWeight};
   font-size: ${props => props.theme.typography[props.type].fontSize}px;
   line-height: ${props => props.theme.typography[props.type].lineHeight}px;
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index b572399a6c..18088dea06 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react";
 import { CommonComponentProps, hexToRgba } from "./common";
 import styled from "styled-components";
-import { theme } from "../../constants/DefaultTheme";
 import Text, { TextType } from "./Text";
+import { theme } from "constants/DefaultTheme";
 
 export type TextInputProps = CommonComponentProps & {
   placeholder?: string;
@@ -45,7 +45,6 @@ const StyledInput = styled.input<
   box-shadow: none;
   margin-bottom: ${props => props.theme.spaces[1]}px;
   border: 1px solid ${props => props.inputStyle.borderColor};
-  font-family: ${props => props.theme.fonts[3]};
   padding: ${props => props.theme.spaces[4]}px
     ${props => props.theme.spaces[6]}px;
   background-color: ${props => props.inputStyle.bgColor};
diff --git a/app/client/src/components/designSystems/blueprint/TextComponent.tsx b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
index 96a2ec59bb..7e5a75176f 100644
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@@ -33,7 +33,7 @@ export const StyledText = styled(Text)<{
   height: 100%;
   overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
   text-overflow: ellipsis;
-  text-align: ${props => props.textAlign.toLowerCase()}
+  text-align: ${props => props.textAlign.toLowerCase()};
   display: flex;
   width: 100%;
   justify-content: flex-start;
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 4326eaf845..dd4e1f71d6 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -113,7 +113,7 @@ const FailedMessageContainer = styled.div`
   padding-top: 10px;
   padding-bottom: 7px;
   padding-left: 15px;
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
diff --git a/app/client/src/components/editorComponents/HighlightedCode/themes.ts b/app/client/src/components/editorComponents/HighlightedCode/themes.ts
index f38d156524..d4a0313bc6 100644
--- a/app/client/src/components/editorComponents/HighlightedCode/themes.ts
+++ b/app/client/src/components/editorComponents/HighlightedCode/themes.ts
@@ -6,7 +6,7 @@ export const LIGHT = css`
     color: black;
     background: none;
     text-shadow: 0 1px white;
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-family: ${props => props.theme.fonts.code};
     font-size: 1em;
     text-align: left;
     white-space: pre;
@@ -144,7 +144,7 @@ export const DARK = css`
   pre[class*="language-"] {
     color: white;
     background: none;
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-family: ${props => props.theme.fonts.code};
     font-size: 1em;
     text-align: left;
     text-shadow: 0 -0.1em 0.2em black;
diff --git a/app/client/src/components/editorComponents/RequestView.tsx b/app/client/src/components/editorComponents/RequestView.tsx
index 508e53c73a..5647465482 100644
--- a/app/client/src/components/editorComponents/RequestView.tsx
+++ b/app/client/src/components/editorComponents/RequestView.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
 
 const StyledKey = styled.span`
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -32,7 +32,7 @@ const KeyValuePair = function(props: { hKey: string; hValue: string }) {
 };
 
 const StyledTreeContainer = styled.div`
-  font-family: DM Sans;
+  font-family: ${props => props.theme.fonts.text};
   .bp3-tree-node-content {
     height: auto;
   }
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 65cb18d088..2990382b5d 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -269,7 +269,10 @@ export type Theme = {
   colors: any;
   typography: any;
   lineHeights: Array<number>;
-  fonts: Array<FontFamily>;
+  fonts: {
+    code: FontFamily;
+    text: FontFamily;
+  };
   borders: ThemeBorder[];
   evaluatedValuePopup: {
     width: number;
@@ -603,11 +606,10 @@ export const theme: Theme = {
     lightningborder: Colors.ALABASTER,
   },
   lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80],
-  fonts: [
-    FontFamilies.DMSans,
-    FontFamilies.FiraCode,
-    FontFamilies.HomePageRedesign,
-  ],
+  fonts: {
+    text: FontFamilies.TextFonts,
+    code: FontFamilies.CodeFonts,
+  },
   borders: [
     {
       thickness: 1,
diff --git a/app/client/src/constants/Fonts.tsx b/app/client/src/constants/Fonts.tsx
index 5dac83c6b7..cb2614f6fb 100644
--- a/app/client/src/constants/Fonts.tsx
+++ b/app/client/src/constants/Fonts.tsx
@@ -1,4 +1,4 @@
-export const DMSans = "DM Sans";
-export const FiraCode = '"Fira code", "Fira Mono", monospace';
-export const HomePageRedesign =
-  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+export const TextFonts =
+  "-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif";
+export const CodeFonts =
+  'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace';
diff --git a/app/client/src/index.css b/app/client/src/index.css
index 110d33b459..8d6b48b123 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -6,8 +6,6 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #efefef;
@@ -17,10 +15,6 @@ body.dragging *{
   cursor: grabbing !important;
 }
 
-body.fontLoaded {
-  font-family: "DM Sans", sans-serif;
-}
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
diff --git a/app/client/src/pages/Editor/APIEditor/Pagination.tsx b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
index c61b5f5d37..c75c64c512 100644
--- a/app/client/src/pages/Editor/APIEditor/Pagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
@@ -19,7 +19,7 @@ const PaginationFieldWrapper = styled.div`
 
 const ExampleApi = styled.p`
   color: #ef7b63;
-  font-family: monospace;
+  font-family: ${props => props.theme.fonts.code};
 `;
 
 const StyledLabel = styled.label`
diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx
index 3fc4251562..adc057bcef 100644
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@@ -46,7 +46,7 @@ export const Wrapper = styled.div`
     }
   }
   & i {
-    font-family: ${props => props.theme.fonts[2]};
+    font-family: ${props => props.theme.fonts.text};
     font-size: ${props => props.theme.fontSizes[7]}px;
   }
 `;
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index a318b1c69f..2c546d408e 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -2,7 +2,6 @@ import { ReduxAction } from "constants/ReduxActionConstants";
 import { getAppsmithConfigs } from "configs";
 import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
-import FontFaceObserver from "fontfaceobserver";
 import FormControlRegistry from "./FormControlRegistry";
 import { Property } from "api/ActionAPI";
 import _ from "lodash";
@@ -42,16 +41,6 @@ export const appInitializer = () => {
   }
 
   log.setLevel(getEnvLogLevel(appsmithConfigs.logLevel));
-
-  const textFont = new FontFaceObserver("DM Sans");
-  textFont
-    .load()
-    .then(() => {
-      document.body.className += "fontLoaded";
-    })
-    .catch(err => {
-      console.log(err);
-    });
 };
 
 export const mapToPropList = (map: Record<string, string>): Property[] => {
