Integrating Google Fonts with Next.js Optimally

Show the steps to correctly integrate Google Fonts using the `next/google-fonts` package to efficiently load fonts in a Next.js app while minimizing impact on performance.
// Step 1: Install the next-google-fonts package
// Run the following command in your terminal
npm install @next/font-google
Installs the @next/font-google package to be used for font optimization.
// Step 2: Create a _document.js file in your pages directory if it doesn't already exist
// Add the following imports and class to your _document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GoogleFont } from '@next/font-google';

export default class MyDocument extends Document {
  render() {
    return (
          {GoogleFont({ href: ';700&display=swap' })}
          <Main />
          <NextScript />
Defines a custom Document and includes the Google font by using the GoogleFont component from the next/font-google package. The href attribute should point to the Google Fonts CSS URL of your chosen font(s).
// Step 3: Use the font in your application

// In your CSS (e.g., styles/global.css)
body {
  font-family: 'Roboto', sans-serif;

// Or a CSS-in-JS solution (e.g., styled-jsx or emotion)
<style jsx>{`
  body {
    font-family: 'Roboto', sans-serif;
This step ensures the font is applied within your application by setting the 'font-family' in your stylesheet to the Google Font you included in the _document.js file.