fix font bug

gatsby-config.js

@@ -35,7 +35,12 @@ module.exports = {
         icon: `src/images/logo.svg`, // This path is relative to the root of the site.
       },
     },
-    `gatsby-theme-material-ui`,
+    {
+      resolve: `gatsby-theme-material-ui`,
+      options: {
+        webFontsConfig: null,
+      },
+    },
     `gatsby-plugin-sitemap`,
     {
       resolve: "gatsby-plugin-robots-txt",

src/components/Layout/Layout.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import classnames from "classnames"
 
 import { makeStyles } from "@material-ui/core/styles"
+import { Helmet } from "react-helmet"
 import { CssBaseline } from "@material-ui/core"
 import Navbar from "./Navbar"
 import Footer from "./Footer"
@@ -26,6 +27,12 @@ const Layout = ({
 
   return (
     <Fragment>
+      <Helmet>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+          rel="stylesheet"
+        ></link>
+      </Helmet>
       {showNavbar && <Navbar {...navbarProps} />}
       <main className={classnames(className, classes.main)}>{children}</main>
       {showFooter && <Footer />}