chore: switch to inter

packages/docs/package.json

@@ -14,6 +14,7 @@
     "@mdx-js/loader": "1.5.8",
     "@next/mdx": "9.3.3",
     "next": "9.3.3",
+    "next-google-fonts": "0.1.0",
     "prism-react-renderer": "1.0.2",
     "raam": "^0.2.0",
     "react": "16.13.1",

packages/docs/src/components/head.tsx

@@ -1,59 +1,63 @@
 /** @jsx jsx */
 import * as React from "react";
 import NextHead from "next/head";
+import { GoogleFonts } from "next-google-fonts";
 import { jsx, useThemeUI } from "theme-ui";
 import config from "../config";
 
 const Head: React.FC = () => {
   const { theme } = useThemeUI();
 
   return (
-    <NextHead>
-      <meta charSet="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-      <title>{config.meta.title}</title>
-      <link rel="preconnect" href="https://www.google-analytics.com" />
-
-      <script
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalyticsID}`}
-      />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
+    <React.Fragment>
+      <GoogleFonts />
+      <NextHead>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <title>{config.meta.title}</title>
+        <link rel="preconnect" href="https://www.google-analytics.com" />
+
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${config.googleAnalyticsID}`}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', '${config.googleAnalyticsID}', {
               page_path: window.location.pathname,
             });
           `,
-        }}
-      />
-
-      <meta name="twitter:site" content={config.meta.social.twitter} />
-      <meta name="twitter:creator" content={config.meta.social.twitter} />
-      <meta name="twitter:card" content="summary" />
-      <meta property="og:url" content={config.meta.url} />
-      <meta property="og:title" content={config.meta.title} />
-      <meta property="og:description" content={config.meta.description} />
-      <meta
-        property="og:image"
-        content={`${config.meta.url}/img/logo-og.png`}
-      />
-
-      <link rel="shortcut icon" href="/img/favicon@192.png" />
-      <link rel="apple-touch-icon" href="/img/icon@192.png" />
-      <meta name="apple-mobile-web-app-title" content={config.meta.title} />
-
-      <meta name="description" content={config.meta.description} />
-
-      <link rel="canonical" href={config.meta.url} />
-
-      <meta name="theme-color" content={theme.colors.background} />
-      <link rel="manifest" href="/manifest.json" />
-    </NextHead>
+          }}
+        />
+
+        <meta name="twitter:site" content={config.meta.social.twitter} />
+        <meta name="twitter:creator" content={config.meta.social.twitter} />
+        <meta name="twitter:card" content="summary" />
+        <meta property="og:url" content={config.meta.url} />
+        <meta property="og:title" content={config.meta.title} />
+        <meta property="og:description" content={config.meta.description} />
+        <meta
+          property="og:image"
+          content={`${config.meta.url}/img/logo-og.png`}
+        />
+
+        <link rel="shortcut icon" href="/img/favicon@192.png" />
+        <link rel="apple-touch-icon" href="/img/icon@192.png" />
+        <meta name="apple-mobile-web-app-title" content={config.meta.title} />
+
+        <meta name="description" content={config.meta.description} />
+
+        <link rel="canonical" href={config.meta.url} />
+
+        <meta name="theme-color" content={theme.colors.background} />
+        <link rel="manifest" href="/manifest.json" />
+      </NextHead>
+    </React.Fragment>
   );
 };
 

packages/docs/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { AppProps } from "next/app";
-import { ThemeProvider, Styled } from "theme-ui";
+import { GoogleFontsProvider } from "next-google-fonts";
+import { ThemeProvider } from "theme-ui";
 import Code from "../components/code";
 import Layout from "../components/layout";
 import headings from "../components/headings";
@@ -12,9 +13,9 @@ const RaamApp = ({ Component, pageProps }: AppProps) => (
     // @ts-ignore
     components={{ wrapper: Layout, code: Code, ...headings }}
   >
-    <Styled.root>
+    <GoogleFontsProvider href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
       <Component {...pageProps} />
-    </Styled.root>
+    </GoogleFontsProvider>
   </ThemeProvider>
 );
 

packages/docs/src/theme.ts

@@ -40,7 +40,7 @@ const theme = {
   },
   space,
   fonts: {
-    body: '-apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body: '"Inter", sans-serif',
     heading: "inherit",
     monospace: "Menlo, monospace",
   },

yarn.lock

@@ -9908,6 +9908,11 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+next-google-fonts@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/next-google-fonts/-/next-google-fonts-0.1.0.tgz#aa8aa910464a59847b478279d4130e50a76d60aa"
+  integrity sha512-X1RKvp8F61RrDW638ncaOSSyPdEpdz4OukveXaS+S8hfEksAdYUmpfJSi5I5rfJhpXqkKau4iSnGzdr2BmKHxg==
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"