Published on

Authors

## Step 1: Pick your fonts

First and foremost step is to pick the font of your choice. For this article, I am picking Roboto with Thin and Regular font weight. Once you select it, copy the code that comes up for <link>. It should look something like below for your fonts.

<link rel="preconnect" href="https://fonts.googleapis.com">


## Step 2: Create _document.js file

Next step is to create _document.js file under /pages folder. Once created, you can add your fonts to your document like below by extending Document class.

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
render() {
return (
<Html>
rel="stylesheet"
/>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;


<Html>, <Head>, <Main> and <NextScript> is mandatory to render the page peroperly.

That's all you have to do to add google fonts to your Next.js app. Now you can reference Roboto font in your css like below.

body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}


Feel free to reach out if this doesn't work for you.