diff --git a/app/components/DocumentCard.tsx b/app/components/DocumentCard.tsx
index 1355fad5e5..1372bcfa17 100644
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -279,8 +279,8 @@ const Heading = styled.h3`
   overflow: hidden;
 
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 export default observer(DocumentCard);
diff --git a/app/components/DocumentListItem.tsx b/app/components/DocumentListItem.tsx
index e28da902e7..009085a951 100644
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -262,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   white-space: nowrap;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 const StarPositioner = styled(Flex)`
diff --git a/app/components/FilterOptions.tsx b/app/components/FilterOptions.tsx
index db89d7b1ff..be39e41504 100644
--- a/app/components/FilterOptions.tsx
+++ b/app/components/FilterOptions.tsx
@@ -80,7 +80,7 @@ const Note = styled(Text)`
   margin-bottom: 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
   color: ${s("textTertiary")};
 `;
 
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 55f7dd36fc..5cab19eaba 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -94,11 +94,9 @@ const Modal: React.FC<Props> = ({
                           {title}
                         </Text>
                       )}
-                      <Text as="span" size="large">
-                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon />
-                        </NudeButton>
-                      </Text>
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
                     </Header>
                   </Centered>
                 </Small>
diff --git a/app/components/Text.ts b/app/components/Text.ts
index f9759745d3..aa90a1da83 100644
--- a/app/components/Text.ts
+++ b/app/components/Text.ts
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 type Props = {
   type?: "secondary" | "tertiary" | "danger";
@@ -31,12 +31,17 @@ const Text = styled.p<Props>`
       : props.size === "xsmall"
       ? "13px"
       : "inherit"};
-  font-weight: ${(props) =>
-    props.weight === "bold"
-      ? 500
-      : props.weight === "normal"
-      ? "normal"
-      : "inherit"};
+
+  ${(props) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight === "bold"
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
   white-space: normal;
   user-select: ${(props) => (props.selectable ? "text" : "none")};
 `;
diff --git a/app/scenes/Document/components/ReferenceListItem.tsx b/app/scenes/Document/components/ReferenceListItem.tsx
index 9aa087b7d0..a5f571fbe7 100644
--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -49,8 +49,7 @@ const Title = styled.div`
   line-height: 1.25;
   padding-top: 3px;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
 `;
 
 function ReferenceListItem({
diff --git a/app/scenes/Search/Search.tsx b/app/scenes/Search/Search.tsx
index 74965370e8..9b76f7b27d 100644
--- a/app/scenes/Search/Search.tsx
+++ b/app/scenes/Search/Search.tsx
@@ -464,7 +464,7 @@ const SearchTitlesFilter = styled(Switch)`
   margin-left: 8px;
   margin-top: 2px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 `;
 
 export default withTranslation()(withStores(withRouter(Search)));
diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts
index 2d29ecc667..f30b74449d 100644
--- a/app/typings/styled-components.d.ts
+++ b/app/typings/styled-components.d.ts
@@ -20,7 +20,9 @@ declare module "styled-components" {
     scrollbarThumb: string;
     fontFamily: string;
     fontFamilyMono: string;
-    fontWeight: number;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightBold: number;
     link: string;
     placeholder: string;
     textSecondary: string;
diff --git a/public/fonts/Inter-italic.var.woff2 b/public/fonts/Inter-italic.var.woff2
new file mode 100644
index 0000000000..b826d5af84
Binary files /dev/null and b/public/fonts/Inter-italic.var.woff2 differ
diff --git a/public/fonts/Inter.var.woff2 b/public/fonts/Inter.var.woff2
new file mode 100644
index 0000000000..365eedc50c
Binary files /dev/null and b/public/fonts/Inter.var.woff2 differ
diff --git a/server/routes/index.ts b/server/routes/index.ts
index f2694bf0f9..f4fbdf63c4 100644
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -23,7 +23,7 @@ const router = new Router();
 koa.use<BaseContext, UserAgentContext>(userAgent);
 
 // serve public assets
-router.use(["/images/*", "/email/*"], async (ctx, next) => {
+router.use(["/images/*", "/email/*", "/fonts/*"], async (ctx, next) => {
   let done;
 
   if (ctx.method === "HEAD" || ctx.method === "GET") {
diff --git a/server/static/index.html b/server/static/index.html
index 7da7260549..9698495909 100644
--- a/server/static/index.html
+++ b/server/static/index.html
@@ -30,6 +30,21 @@
       title="Outline"
     />
     <style>
+      @font-face {
+        font-family: "Inter";
+        font-display: swap;
+        font-feature-settings: "ss03", "cv05";
+        src: url("{cdn-url}/fonts/Inter.var.woff2") format("woff2");
+      }
+
+      @font-face {
+        font-family: "Inter";
+        font-display: swap;
+        font-feature-settings: "ss03", "cv05";
+        font-style: italic;
+        src: url("{cdn-url}/fonts/Inter-italic.var.woff2") format("woff2");
+      }
+
       body,
       html {
         margin: 0;
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 79de117452..b30a08bb95 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -254,9 +254,9 @@ flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
 color: ${props.theme.text};
 font-family: ${props.theme.fontFamily};
-font-weight: ${props.theme.fontWeight};
+font-weight: ${props.theme.fontWeightRegular};
 font-size: 1em;
-line-height: 1.6em;
+line-height: -0.011;
 width: 100%;
 
 .mention {
@@ -285,9 +285,6 @@ width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
   white-space: break-spaces;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
-  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
   padding: ${props.editorStyle?.padding ?? "initial"};
   margin: ${props.editorStyle?.margin ?? "initial"};
 
@@ -329,12 +326,12 @@ width: 100%;
 
   // all of heading sizes are stepped down one from global styles, except h1
   // which is between h1 and h2
-  h1 { font-size: 1.75em; }
-  h2 { font-size: 1.25em; }
-  h3 { font-size: 1em; }
-  h4 { font-size: 0.875em; }
-  h5 { font-size: 0.75em; }
-  h6 { font-size: 0.75em; }
+  h1 { font-size: 28px; }
+  h2 { font-size: 22px; }
+  h3 { font-size: 18px; }
+  h4 { font-size: 16px; }
+  h5 { font-size: 15px; }
+  h6 { font-size: 15px; }
 
   .ProseMirror-yjs-cursor {
     position: relative;
diff --git a/shared/styles/globals.ts b/shared/styles/globals.ts
index 8260fe4971..ceb6099b2a 100644
--- a/shared/styles/globals.ts
+++ b/shared/styles/globals.ts
@@ -30,8 +30,7 @@ export default createGlobalStyle<Props>`
   optgroup,
   select,
   textarea {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: ${s("fontFamily")};
   }
 
   body {
@@ -82,12 +81,11 @@ export default createGlobalStyle<Props>`
     margin-top: 1em;
     margin-bottom: 0.5em;
   }
-  h1 { font-size: 2.25em; }
-  h2 { font-size: 1.5em; }
-  h3 { font-size: 1.25em; }
-  h4 { font-size: 1em; }
-  h5 { font-size: 0.875em; }
-  h6 { font-size: 0.75em; }
+  h1 { font-size: 36px; }
+  h2 { font-size: 26px; }
+  h3 { font-size: 22px; }
+  h4 { font-size: 18px; }
+  h5 { font-size: 16px; }
 
   p,
   dl,
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
index 62e5e806e6..2ca4308d94 100644
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -59,10 +59,12 @@ const buildBaseTheme = (input: Partial<Colors>) => {
 
   return {
     fontFamily:
-      "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+      "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif",
     fontFamilyMono:
-      "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
-    fontWeight: 400,
+      "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
     backgroundTransition: "background 100ms ease-in-out",
     accentText: colors.white,
     selected: colors.accent,