Menambahkan Google Font di Nextjs

12 Maret 2022

Google Font adalah Layanan Font berbasis cloud yang bisa digunakan untuk web atau lainnya, disini akan saya bahas menambahkan Layanan Google font menggunakan Nextjs dan berikut adalah caranya :

Buat file dengan nama _document.jsx di folder pages disini karna saya menggunakan jsx maka saya pakai jsx silahkan anda sesuaikan nama filenya.

dan buat seperti ini :

import Document, { Head, Html, Main, NextScript } from 'next/document';
import { createGetInitialProps } from '@mantine/next';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
  static getInitialProps = getInitialProps;

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Back to Home