diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index f38c6379e..ec668e5e8 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -5,6 +5,7 @@ import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
+import GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
   useDetectThemeMode()
@@ -24,6 +25,7 @@ function DAppProviders() {
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
         <ChakraProvider theme={theme}>
+          <GlobalStyles />
           <DApp />
         </ChakraProvider>
       </WalletContextProvider>
diff --git a/dapp/src/components/GlobalStyles/index.tsx b/dapp/src/components/GlobalStyles/index.tsx
new file mode 100644
index 000000000..355c6555d
--- /dev/null
+++ b/dapp/src/components/GlobalStyles/index.tsx
@@ -0,0 +1,47 @@
+import React from "react"
+import { Global } from "@emotion/react"
+
+import SegmentRegular from "../../fonts/Segment-Regular.otf"
+import SegmentMedium from "../../fonts/Segment-Medium.otf"
+import SegmentSemiBold from "../../fonts/Segment-SemiBold.otf"
+import SegmentBold from "../../fonts/Segment-Bold.otf"
+import SegmentBlack from "../../fonts/Segment-Black.otf"
+
+export default function GlobalStyles() {
+  return (
+    <Global
+      styles={`
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentRegular}) format("otf");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("otf");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("otf");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("otf");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("otf");
+          font-weight: 900;
+          font-style: normal;
+        }
+      `}
+    />
+  )
+}
diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx
index 221f22f60..8b9c5979e 100644
--- a/dapp/src/components/Overview/Statistics.tsx
+++ b/dapp/src/components/Overview/Statistics.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function Statistics(props: CardProps) {
   return (
diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx
index 7b03b3b9f..e0ff1fb26 100644
--- a/dapp/src/components/Overview/TransactionHistory.tsx
+++ b/dapp/src/components/Overview/TransactionHistory.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function TransactionHistory(props: CardProps) {
   return (
diff --git a/dapp/src/components/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
similarity index 100%
rename from dapp/src/components/Typography/index.tsx
rename to dapp/src/components/shared/Typography/index.tsx
diff --git a/dapp/src/fonts/Segment-Black.otf b/dapp/src/fonts/Segment-Black.otf
new file mode 100644
index 000000000..11d290a00
Binary files /dev/null and b/dapp/src/fonts/Segment-Black.otf differ
diff --git a/dapp/src/fonts/Segment-Bold.otf b/dapp/src/fonts/Segment-Bold.otf
new file mode 100644
index 000000000..b1f708029
Binary files /dev/null and b/dapp/src/fonts/Segment-Bold.otf differ
diff --git a/dapp/src/fonts/Segment-Medium.otf b/dapp/src/fonts/Segment-Medium.otf
new file mode 100644
index 000000000..9df63cbd5
Binary files /dev/null and b/dapp/src/fonts/Segment-Medium.otf differ
diff --git a/dapp/src/fonts/Segment-Regular.otf b/dapp/src/fonts/Segment-Regular.otf
new file mode 100644
index 000000000..124d0b60e
Binary files /dev/null and b/dapp/src/fonts/Segment-Regular.otf differ
diff --git a/dapp/src/fonts/Segment-SemiBold.otf b/dapp/src/fonts/Segment-SemiBold.otf
new file mode 100644
index 000000000..79a8e6489
Binary files /dev/null and b/dapp/src/fonts/Segment-SemiBold.otf differ
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index de73c60c8..fe038e9a8 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -2,7 +2,7 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
+import { colors, fontSizes, fontWeights, fonts, lineHeights } from "./utils"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -10,6 +10,7 @@ Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
+  fonts,
   fontSizes,
   fontWeights,
   lineHeights,
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
index 18a482760..533af2b4e 100644
--- a/dapp/src/theme/utils/fonts.ts
+++ b/dapp/src/theme/utils/fonts.ts
@@ -7,6 +7,7 @@ export const fontSizes = {
 }
 
 export const fontWeights = {
+  normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700,
@@ -20,3 +21,8 @@ export const lineHeights = {
   lg: "1.75rem",
   xl: "1.875rem",
 }
+
+export const fonts = {
+  heading: "Segment, sans-serif",
+  body: "Segment, sans-serif",
+}