The font used in the production build of Next.js differs from the font used in the development build

Question

The font used in the production build of Next.js differs from the font used in the development build

It's evident from the images provided that the font used in my Production Build and Development Build for my Next.js webpage is different. Upon running npm run build and npm start to test the production build, the Montserrat Font disappears from the webpage.

Below is how I imported the font into my globals.scss file. Please let me know if there's an error in my approach:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: hsl(265, 3%, 53%);
  color: black;
  &:before{
    content:'';
    content: "";
    width: 100%;
    height: 100vh;
  }
}

Production Build Screenshot:

https://i.sstatic.net/STIIE.png

Development Build Screenshot:

https://i.sstatic.net/i5g6l.png

css next.js

Answer 1

Answer №1

Enhancing the font across your entire Next.js app for production can be achieved by utilizing a custom Document. For more information, you can refer to this helpful guide as well as this reference.

Here is an example code snippet from the _document.js file:

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

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Make sure to include the necessary CSS styles in the globals.css file:

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
}

Answer 2

Enhancing the font across your entire Next.js app for production can be achieved by utilizing a custom Document. For more information, you can refer to this helpful guide as well as this reference.

Here is an example code snippet from the _document.js file:

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

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Make sure to include the necessary CSS styles in the globals.css file:

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
}

The font used in the production build of Next.js differs from the font used in the development build

Answer №1

Similar questions

Bootstrap 4 experiences issues with modal dialogs

Guide on implementing the addClass method for a :before pseudo-element when clicked

Creating a button that seamlessly adapts to all browsers

Leveraging selenium webdriver in python for extracting data from SVG text elements

Tips for altering value by selecting radio buttons

Unable to adjust the top padding of the navbar to 0 pixels

Changing the array in child 2 based on the information provided by child 1

Guide for accessing data in a reusable layout module within Next.js

Using GitHub Releases alongside Vercel: A Step-by-Step Guide

The video background conceals the presence of the links placed behind

Tips for inserting a dropdown arrow below caret on Bootstrap 4

Adding a logo to a website that utilizes CSS, HTML, JS, and Bootstrap

Arranging three section elements side by side

How to effectively use jQuery to center images of varying widths horizontally within a div element

What steps can I take to stop the window/body from scrolling "through" a modal div?

What is the best method to obtain the following id for an image?

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

Struggling to create a CSS dropdown menu where the dropdown items refuse to align to the left

Enable access to the child of Lages and apply CSS to disable it

The spin control buttons on the right of the input type=date are not properly aligned vertically