Quick Tip: Add Google Font to Material-UI for Gatsby

In this Quick Tip, let's add a Google Font to our Gatsby application using Material-UI. First, let's choose a font, so head over to https://fonts.google.com/ and pick something you like. Now that we have a font, we need to import it into the project. We can do this with the component.

...
import { Helmet } from "react-helmet"
...
<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"/>
</Helmet>
...

Now use it.

import {
  makeStyles,
  Theme,
  createStyles,
  withStyles,
} from "@material-ui/core/styles"
...
const useStyles = makeStyles(({ breakpoints, palette, spacing }: Theme) =>
  createStyles({
    title: {
      fontFamily: '"Permanent Marker", "Roboto", sans-serif'
    },
  })
)
...
<p className={classes.title}>Hello World</p>
...

That's all there is to it.


Copyright © 2020 Code Green LLC