add font in theme config

8cab2595 · tom · 8ab8cf0a · 8cab2595 · 8cab2595 · 8cab2595
Commit 8cab2595 authored Jun 10, 2022 by tom
Hide whitespace changes
Inline Side-by-side

Showing with 42 additions and 1 deletion

_app.tsx pages/_app.tsx +2 -1

_document.tsx pages/_document.tsx +23 -0

fonts.ts theme/fonts.ts +8 -0

index.ts theme/index.ts +9 -0

No files found.
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
 import React from 'react';
 import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
+import theme from '../theme/index';

 function MyApp({ Component, pageProps }: AppProps) {
  return (
-    <ChakraProvider>
+    <ChakraProvider theme={ theme }>
      <Component { ...pageProps }/>
    </ChakraProvider>
  );

--- a/pages/_document.tsx
+++ b/pages/_document.tsx
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main/>
+          <NextScript/>
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
--- a/theme/fonts.ts
+++ b/theme/fonts.ts
+import { theme } from '@chakra-ui/react';
+
+const fonts = {
+  heading: `Inter, ${ theme.fonts.heading }`,
+  body: `Inter, ${ theme.fonts.body }`,
+}
+
+export default fonts;
--- a/theme/index.ts
+++ b/theme/index.ts
+import { extendTheme } from '@chakra-ui/react';
+
+import fonts from './fonts';
+
+const overrides = {
+  fonts,
+}
+
+export default extendTheme(overrides);