NextJS - Google font is not loading or displaying on the website

user_7705906 0
Viewed 5425

Followed the documentation and added a _document.js file with the provided code:

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

When I use my chrome extension font checker and verify in the inspector, it states that it using the defaults fonts. Any idea how I can get this to work? Might there be some interference with the fact that I'm using tailwindcss?

google-fonts tailwind-css next.js reactjs fonts
4 Answers

in globals.css

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');

/* From Public Directory */
@font-face {
  font-family: 'Kurale';
  src: url('/fonts/Kurale.ttf');
  font-style: medium;
  font-weight: normal;
  font-display: swap;
}
user_140790670
  1. Check this, use <style data-href= instead of
  2. For the fonts with NExtJS and Vercel I recommend you to use fontsource
user_82801120

Import all fonts in the globals.css or in the stylesheet imported in _app.tsx

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");

All the fonts had to be imported separately. For me, importing them all together didn't work in the production.

user_85297110

Instead of <link> try using @import in your globals.css (or any stylesheet which is imported to the _app.js):

/* globals.css */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap");
user_73303160
Related