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.