style: added Inter font for use with Tailwind UI

4 years ago · c6474558f1
parent 46eec85264
commit c6474558f1
2 changed files with 42 additions and 1 deletions
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -0,0 +1,35 @@
+import React from 'react';
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+  DocumentInitialProps,
+} from 'next/document';
+
+class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return initialProps;
+  }
+
+  render(): JSX.Element {
+    return (
+      <Html>
+        <Head>
+          <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,14 @@
 /* eslint-disable */
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 module.exports = {
  purge: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
  },
  variants: {},
  plugins: [