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..80b36e6e8
--- /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("opentype");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("opentype");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("opentype");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("opentype");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("opentype");
+          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/Typography/index.tsx
deleted file mode 100644
index 1ffbd9ff1..000000000
--- a/dapp/src/components/Typography/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react"
-import { Text, TextProps } from "@chakra-ui/react"
-
-export function TextXl(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
-  )
-}
-
-export function TextLg(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
-  )
-}
-
-export function TextMd(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
-  )
-}
-
-export function TextSm(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
-  )
-}
-
-export function TextXs(props: TextProps) {
-  return (
-    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
-  )
-}
diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
new file mode 100644
index 000000000..1e2080c48
--- /dev/null
+++ b/dapp/src/components/shared/Typography/index.tsx
@@ -0,0 +1,56 @@
+import React from "react"
+import { Heading, HeadingProps, Text, TextProps } from "@chakra-ui/react"
+
+export function H1(props: HeadingProps) {
+  return <Heading as="h1" size={{ base: "6xl", md: "7xl" }} {...props} />
+}
+
+export function H2(props: HeadingProps) {
+  return <Heading as="h2" size={{ base: "5xl", md: "6xl" }} {...props} />
+}
+
+export function H3(props: HeadingProps) {
+  return <Heading as="h3" size={{ base: "4xl", md: "5xl" }} {...props} />
+}
+
+export function H4(props: HeadingProps) {
+  return <Heading as="h4" size={{ base: "3xl", md: "4xl" }} {...props} />
+}
+
+export function H5(props: HeadingProps) {
+  return <Heading as="h5" size={{ base: "2xl", md: "3xl" }} {...props} />
+}
+
+export function H6(props: HeadingProps) {
+  return <Heading as="h6" size={{ base: "xl", md: "2xl" }} {...props} />
+}
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}
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/Heading.ts b/dapp/src/theme/Heading.ts
new file mode 100644
index 000000000..fbdf450d1
--- /dev/null
+++ b/dapp/src/theme/Heading.ts
@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Heading: ComponentSingleStyleConfig = {
+  sizes: {
+    "7xl": {
+      fontSize: "4.5rem",
+      lineHeight: "5.625rem",
+    },
+    "6xl": {
+      fontSize: "3.75rem",
+      lineHeight: "4.5rem",
+    },
+    "5xl": {
+      fontSize: "3rem",
+      lineHeight: "3.75rem",
+    },
+    "4xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+    },
+    "3xl": {
+      fontSize: "1.875rem",
+      lineHeight: "2.375rem",
+    },
+    "2xl": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+}
+
+export default Heading
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 4a6b9847e..b90c220da 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -2,7 +2,8 @@ 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, fonts, lineHeights } from "./utils"
+import Heading from "./Heading"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -10,8 +11,7 @@ Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
-  fontSizes,
-  fontWeights,
+  fonts,
   lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
@@ -25,6 +25,7 @@ const defaultTheme = {
   components: {
     Button,
     Switch,
+    Heading,
   },
 }
 
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
index 18a482760..5fdcc15a6 100644
--- a/dapp/src/theme/utils/fonts.ts
+++ b/dapp/src/theme/utils/fonts.ts
@@ -1,22 +1,12 @@
-export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem",
-}
-
-export const fontWeights = {
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  black: 900,
-}
-
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
   xl: "1.875rem",
+  lg: "1.75rem",
+  md: "1.5rem",
+  sm: "1.25rem",
+  xs: "1.125rem",
+}
+
+export const fonts = {
+  heading: "Segment, sans-serif",
+  body: "Segment, sans-serif",
 }