Use "Inter" as default typeface (#5741)

* Inter

* tweaks

* tweaks

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,
+  font-family: ${s("fontFamily")};
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 500;
 `;
 
 export default observer(DocumentCard);

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,
+  font-family: ${s("fontFamily")};
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 500;
 `;
 
 const StarPositioner = styled(Flex)`

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")};
 `;
 

app/components/Modal.tsx

@@ -94,11 +94,9 @@ const Modal: React.FC<Props> = ({
                           {title}
                         </Text>
                       )}
-                      <Text as="span" size="large">
+                      <NudeButton onClick={onRequestClose}>
-                        <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
-                          <CloseIcon />
+                      </NudeButton>
-                        </NudeButton>
-                      </Text>
                     </Header>
                   </Centered>
                 </Small>

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"
+  ${(props) =>
-      ? 500
+    props.weight &&
-      : props.weight === "normal"
+    css`
-      ? "normal"
+      font-weight: ${props.weight === "bold"
-      : "inherit"};
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
   white-space: normal;
   user-select: ${(props) => (props.selectable ? "text" : "none")};
 `;

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,
+  font-family: ${s("fontFamily")};
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
 
 function ReferenceListItem({

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)));

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;

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") {

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;

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; }
+  h1 { font-size: 28px; }
-  h2 { font-size: 1.25em; }
+  h2 { font-size: 22px; }
-  h3 { font-size: 1em; }
+  h3 { font-size: 18px; }
-  h4 { font-size: 0.875em; }
+  h4 { font-size: 16px; }
-  h5 { font-size: 0.75em; }
+  h5 { font-size: 15px; }
-  h6 { font-size: 0.75em; }
+  h6 { font-size: 15px; }
 
   .ProseMirror-yjs-cursor {
     position: relative;

shared/styles/globals.ts

@@ -30,8 +30,7 @@ export default createGlobalStyle<Props>`
   optgroup,
   select,
   textarea {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    font-family: ${s("fontFamily")};
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
 
   body {
@@ -82,12 +81,11 @@ export default createGlobalStyle<Props>`
     margin-top: 1em;
     margin-bottom: 0.5em;
   }
-  h1 { font-size: 2.25em; }
+  h1 { font-size: 36px; }
-  h2 { font-size: 1.5em; }
+  h2 { font-size: 26px; }
-  h3 { font-size: 1.25em; }
+  h3 { font-size: 22px; }
-  h4 { font-size: 1em; }
+  h4 { font-size: 18px; }
-  h5 { font-size: 0.875em; }
+  h5 { font-size: 16px; }
-  h6 { font-size: 0.75em; }
 
   p,
   dl,

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",
+      "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
-    fontWeight: 400,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
     backgroundTransition: "background 100ms ease-in-out",
     accentText: colors.white,
     selected: colors.accent,